본문 바로가기

Programming/Web

[JavaSript] Fetch API로 JSON Parsing

 

 

Fetch 덕분에 바닐라JS로 간단하게 Ajax를 사용할 수 있게 되었다고한다.

이 전에 Ajax를 사용해 본 적은 없지만 확실히 XMLHttpRequest 보다는 간단

 

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <style>
      table,th,td{
        border: 2px solid;
        border-collapse : collapse;
      }
      table{
        width:80%;
        margin:auto;
      }
    </style>
  </head>
  <body>
    <h1>
      Fetch API
    </h1>
    <br>
    <table>
      <caption>JSON 파싱해서 표 만들기</caption>
      <tr>
        <th>ID</th>
        <th>title</th>
        <th>body</th>
      </tr>
    </table>
    <script>
    //fetch('url')
    //.then()은 서버와 통신 후 response 객체 return
      fetch('https://jsonplaceholder.typicode.com/posts').then(function(res){
        res.json().then(function(json){
          for(i=0;i<json.length;i++){
            document.querySelector("table").innerHTML+=
              "<tr>"+
              "<td>" + json[i].id + "</td>"+
              "<td> " +json[i].title +"</td>"+
              "<td> " +json[i].body + "</td>"+
              "</tr>";
          }
        })
      })
    </script>
  </body>
</html>

 

 

json sample data -> jsonplaceholder.typicode.com

 

JSONPlaceholder - Free Fake REST API

{JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB As of Dec 2020, serving ~1.8 billion requests each month.

jsonplaceholder.typicode.com

 

 

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  //JSON요청시 stringify (API명세에따라 JSON입력)
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

 

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  //JSON요청시 stringify (API명세에따라 JSON입력)
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
.then(function(res){
  res.json().then(function(json){
  	console.log(json);
    })
})

 

'Programming > Web' 카테고리의 다른 글

[JavaSript] Fetch API로 JSON Parsing  (0) 2021.02.16
[JavaScript] JQuery와 Ajax  (0) 2021.02.07
[JavaScript] Ajax XMLhttpRequest  (0) 2021.02.07
[HTML] 기초정리  (0) 2021.01.31
[HTML] table & list  (0) 2021.01.31