Javascript/GMA(2302~)

23.04.27 자바스크립트 JSON 데이터 파일 불러와서 출력하기

hyerin1201 2023. 4. 27. 21:44

JSON 데이터

[
{
"name" : "홍길동",
"major" : "컴퓨터공학",
"grade" : 2
},
{
"name" : "아이언맨",
"major" : "시각디자인",
"grade" : 1
},
{
"name" : "헐크",
"major" : "국문과",
"grade" : 3
}
]

 

Javascript

//수강생 명단 영역에 json 파일을 불러와서 값 출력하기
let xhr = new XMLHttpRequest(); // 내장객체활용하여 서버로부터 데이터 받기. xhr을 인스턴스 객체로 만들기
xhr.open("GET", "student.json"); // get방식, 데이터 파일 이름.
xhr.send(); //데이터 반환

xhr.onreadystatechange = function() {
  if(xhr.readyState == 4 && xhr.status == 200) {//정상적으로 데이터를 받아와서 편집할 수 있는 상태라면
    // let student = JSON.parse(xhr.responseText); //객체타입 데이터로 변환
    let students = JSON.parse(xhr.responseText); // json 데이터 -> 객체타입 데이터로 변환
    // document.getElementById("result").innerHTML = `
    //   <h1>${student.name}</h1>
    //   <ul>
    //   <li>전공 : ${student.major}</li>
    //   <li>학년 : ${student.grade}학년</li>
    //   </ul>
    // `
    renderHTML(students);
  }
}//프로퍼티로 정상적 데이터 수신 여부 확인을 한 xhr에 함수 실행


//json 파일에 데이터가 여러개일경우, 
function renderHTML(students) { //각각의 데이터를 끌고와서, 해당 데이터를 출력하기 위한 함수
  let output = "";
  for(student of students) { //students의 각각의 데이터를 
    output += `
      <h2>${student.name}</h2>
      <ul>
        <li>전공 : ${student.major}</li>
        <li>학년 : ${student.grade}</li>
      </ul>
    `
  }
  document.getElementById("result").innerHTML = output;
}

 

HTML

<body>
  <div id="container">
    <h1>상품정보</h1>
    <div id="result"></div>
  </div>
</body>

 

 

Javascript

const result = document.querySelector("#result");
const url = "https://reqres.in/api/products/10";

let xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.send();

xhr.onreadystatechange = function() {
  if(xhr.readyState == 4 && xhr.status == 200) {
    let product = JSON.parse(xhr.responseText);
    console.log(product);
    result.innerHTML = `
      <p>상품명 : ${product.data.name}</p>
      <p>생산년도 : ${product.data.year}년도</p>
      <p>색상 : ${product.data.color}</p>
    `;
  };
};