[자바스크립트(Java Script)]6.JSON과 Fetch API 학습 정리

Apr 14, 2025

1. JSON 변환


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>json</h1>
    <hr />
    <button onclick="m1()">자바스크립트오브젝트를 JSON으로</button>
    <button onclick="m2()">JSON을 자바스크립트오브젝트로</button>

    <script>
      function m1() {
        let data = JSON.stringify(user);
        console.log(data);
      }

      function m2() {
        let temp = `{"id":1,"username":"ssar","password":"1234","hobby":["축구","농구"],"address":{"con":"한국","city":"부산","code":56666}}`;
        let data = JSON.parse(temp);
        console.log(data);
        console.log(data.address.city);
      }

      let user = {
        id: 1,
        username: "ssar",
        password: "1234",
        hobby: ["축구", "농구"],
        address: {
          con: "한국",
          city: "부산",
          code: 56666,
        },
      };
      //   console.log(user);
    </script>
  </body>
</html>

2. Fetch API (GET 요청)


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <h1>fetch get</h1>
    <hr />
    <button onclick="download()">다운로드</button>
    <hr />
    <button onclick="download()">다운로드2</button>

    <script>
      async function download() {
        let response = fetch("https://jsonplaceholder.typicode.com/todos/1", {
          method: "get",
        });
        // console.log(response);

        response
          .then((res) => res.json())
          .then((res) => {
            console.log(res);
          });
      }

      async function download2() {
        let response = await fetch(
          "https://jsonplaceholder.typicode.com/todos/1",
          {
            method: "get",
          }
        );
        // console.log(response);

        let responseBody = await response.json();
        console.log(responseBody);
      }
    </script>
  </body>
</html>

3. Fetch API 데이터 출력


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }
    </style>
  </head>

  <body>
    <div>
      <div id="userId"></div>
      <div id="id"></div>
      <div id="title"></div>
      <div id="body"></div>
    </div>

    <script>
      async function getPost() {
        let response = await fetch(
          "https://jsonplaceholder.typicode.com/posts/1"
        );
        let responseBody = await response.json(); //js Object

        // console.log(responseBody.userId);
        // console.log(responseBody.id);
        // console.log(responseBody.title);
        // console.log(responseBody.body);

        document.querySelector("#userId").innerHTML = responseBody.userId;
        document.querySelector("#id").innerHTML = responseBody.id;
        document.querySelector("#title").innerHTML = responseBody.title;
        document.querySelector("#body").innerHTML = responseBody.body;
      }

      getPost();
    </script>
  </body>
</html>

See more posts

[자바스크립트(Java Script)]8. Fetch API를 활용한 REST API 통신 기초 (GET, POST, PUT, DELETE 요청)

April 14, 2025

[자바스크립트(Java Script)]6.JSON과 Fetch API 학습 정리

More articles

[자바스크립트(Java Script)]8. Fetch API를 활용한 REST API 통신 기초 (GET, POST, PUT, DELETE 요청)

[자바스크립트(Java Script)]7. 동기적(Synchronous) vs 비동기적(Asynchronous) 처리 방식

[자바스크립트(Java Script)]5.JavaScript 이벤트 핸들링의 기초와 활용

[자바스크립트(Java Script)]4.자바스크립트 DOM 다루기: 요소 선택과 조작