[Javascript] JSON 구조의 데이터를 웹페이지 출력하기

 

JSON 이란?

 

JavaScript Object Notation의 약자로서, 사람과 컴퓨터가 읽기 쉬운 데이터 교환 형식을 의미한다.

가볍고 호환성이 좋아 웹에서 많이 사용된다.

 

---

JSON 데이터 구조 형식

[
 {
     "name": "김민수",
     "age": 30
 },
 {
     "name": "이정호",
     "age": 20
 },
]

 

 

---

 

JSON 데이터 웹페이지에 출력하기

이번에 사용 할 JSON 데이터는 테스트 목적이기 때문에 FAKE REST API인 'JSON PLACEHOLDER'를 사용 할 것이다.

JSONPlaceholder - Free Fake REST API

 

방법은 브라우저에 기본으로 내장되어있는 'fetch' 함수를 사용하거나 외부 라이브러리인 Axios를 사용하면 되는데 이 글에선 두가지 방법 모두 소개 할 것이다.

---

 

가져올 API의 JSON데이터를 보면 아래와 같은 구성으로 이루어져 있다.

//api 링크 https://jsonplaceholder.typicode.com/users/1

{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

 

이 데이터의 일부 내용을 웹페이지에 출력을 시키는 코드를 작성하고자 한다.

 

 

1. fetch함수 

<!---------JSON 데이터가 출력될 HTML 요소------------>
<ul id="dataList"></ul>
<!---------.....JSON 데이터가 출력될 HTML 요소------------>

const DATA_LIST = document.getElementById('dataList');

async function getDataWithFetch() {
  try {
  	//API 
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    
    //fetch 요청 성공여부 체크
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    
    const data = await response.json(); // JSON 데이터를 객체로 변환(파싱)
    
    // GET요청한 JSON데이터를 HTML요소로 출력시키기위한 변수
    const DATA_HTML = `
      <li>이름: ${data.name}</li>
      <li>닉네임: ${data.userName}</li>
      <li>이메일: ${data.email}</li>
      <li>연락처: ${data.phone}</li>
      <li>웹사이트: ${data.website}</li>
    `;
    
    DATA_LIST.innerHTML += DATA_HTML; //데이터 요소 추가
    
    console.log(data); // 가져온 데이터 콘솔창 확인
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

// 함수 호출
getDataWithFetch();

 

 

 

이 코드를 작성 한 후 화면을 확인해 보면 의도한 대로 ul,li 요소로 구성 된 데이터 내용들이 웹 페이지에 정상적으로 출력 되는 것을 볼 수 있다.

 

 

 

 

2. Axios 라이브러리

사실 Axios를 쓰면 같은 코드라도 훨씬 더 쉽게 작성 할 수 있다.

 

axios는 응답 데이터를 자동으로 JSON으로 파싱해서 return 하기 때문에 fetch 작업에서 했던 별도의 JSON 파싱 작업을 거칠 필요가 없다.

 

const DATA_LIST = document.getElementById('dataList');

// axios 함수 호출
async function getDataWithAxios() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users/1'); // 사용자 데이터 가져오기
    const data = response.data; // axios는 JSON 데이터를 자동으로 객체로 변환
    
    // GET요청한 JSON데이터를 HTML요소로 출력시키기위한 변수
    const DATA_HTML = `
      <li>이름: ${data.name}</li>
      <li>닉네임: ${data.username}</li>
      <li>이메일: ${data.email}</li>
      <li>연락처: ${data.phone}</li>
      <li>웹사이트: ${data.website}</li>
    `;
    DATA_LIST.innerHTML += DATA_HTML;
    console.log(data); // 가져온 데이터 출력
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

// 함수 호출
getDataWithAxios();

 

 

결과물은 위의 화면과 같지만 작업을 효율적으로 하기 위한 '라이브러리'를 사용 했기 때문에 코드가 조금 더 간편해졌다.

 

참고로, 보통 JSON데이터의 API의 경우 위의 예시처럼 한개의 데이터가 존재하는 경우는 없다.

여러가지 데이터를 출력시켜야하는데 그런 경우에는 데이터 처리를 위해 반복문(forEach)를 같이 사용해야 의도한 데이터 출력을 정상적으로 할 수 있다.