[JavaScript] json 화면 구현

2024. 10. 10. 02:12ㆍJavaScript

json 파일을 이용해서 화면 구현을 해보자.

관련 기초 문법 익히기

element

div를 이용하여 데이터를 미리 구성해둔 다음,

그 데이터를 출력하는 방법에 대해 배워보기.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>element.html</h1>
    <hr />

    <div id="root">
      <div class="item">
        <div class="name">이지은</div>
        <div class="age">31</div>
      </div>
      <div class="item">
        <div class="name">홍진호</div>
        <div class="age">42</div>
      </div>
      <div class="item">
        <div class="name">나단비</div>
        <div class="age">5</div>
      </div>
    </div>

    <script>
      //  1)  id 를 지정하여 단일 요소를 불러오기
      //      문서상에서 id는 유일해야하기 때문에, 반환형은 단일 요소
      const root = document.getElementById("root");

      //  2)  css 선택자를 이용하여 단일 요소를 불러오기
      //  만약, 선택자로 지정한 요소가 여러개라면, 가장 첫번째 요소 하나만 불러온다
      const firstItem = document.querySelector(".item");

      //  3)  css 선택자를 이용하여 여러 요소를 한번에 불러오기
      //    이때, 반환형은 NodeList 타입이며, forEach 정도만 호출가능
      //    배열로 형변환을 원한다면 Array.from(nodeList) 를 이용하면 된다
      const itemList = document.querySelectorAll("#root > .item");

      console.log(root);
      console.log(firstItem);
      console.log(itemList);

      itemList.forEach((item) => {
        console.log(item.querySelector(".name").innerText);
      });

      const itemArray = Array.from(itemList); //  배열로 바꾼다
      const dataArray = itemArray.map((item) => {
        //  배열로 map 함수 호출가능
        const ob = {};
        ob.name = item.querySelector(".name").innerText;//  innerText : 태그 없이 내용만 가져옴
                                                        //  innerHTML : 사용된 태그까지 다 가져옴 
        ob.age = +item.querySelector(".age").innerText; //  문자열 앞에 (+)를 붙이면 숫자로 변경됨(parseInt와 동일)
        return ob;
      });

      console.log(dataArray); //  값만으로 구성한 객체 배열

    </script>
  </body>
</html>

 

appendChild 

appendChild() : 새로운 요소를 추가하는 방법

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h1>6_appendChild.html</h1>
    <hr>

    <div id="root"></div>

    <script>
        //  자바스크립트에서 HTML 요소를 생성해서 문서에 반영할 수 있다
        //  1) document 내장함수 createElement 활용
        const e1 = document.createElement('div')    //  태그이름
        e1.className = 'item'
        e1.innerText = '돈까스'
        root.appendChild(e1)        //  root 에 자식요소로 e1 을 추가 


        //  2) innerHTML 을 이용하여 문자열 형식으로 태그를 작성하여 추가하기
        const e2 = '<div class="item">초밥</div>'
        root.innerHTML += e2

        
        //  3) 백틱 문자열(``)을 이용하여 추가하기
        //  JSP 에서는 EL 문법과 겹치기 때문에 사용할 수 없고,
        //  .html 과 .js 에서는 이용가능함 
        const food = '라멘'
        const e3 = `<div class="item">${food}</div>`
        root.innerHTML += e3
        
        //  appendChild 는 신규요소를 마지막에 추가함       <>  createElement
        //  만약, 추가하는 요소가 이미 문서에서 불러온 요소라면 마지막으로 자리를 옮긴다 
        const item1 = document.querySelector('.item')
        root.appendChild(item1)     //  새로고침하면 원래 있던 요소는 맨 마지막으로 감(재배열할때 사용 가능)

        const tag = document.querySelector('.item').outerHTML   //  시작 태그 ~ 마무리 태그 까지 전부   
        root.innerHTML += tag

        </script>

</body>
</html>

 

데이터를 직접 넣고 화면에 출력해보기

 <style>
      #root {
        width: 900px;
        margin: auto;
      }
      .item {
        display: flex;
        border: 2px solid black;
        margin: 10px;
        padding: 10px;
      }
      .item > div {
        flex: 1;
      }
      .item > div:nth-child(2) {
        flex: 3;
      }
    </style>
  </head>
  <body>
    <h1>7_ JS 화면 구현</h1>
    <hr />


    <!-- 
        먼저 출력 형식 틀은 html 로 만들어둔 다음, 
        script 로 데이터를 만들어 놓고 forEach 를 이용하여 원하는 틀대로 데이터 출력시켜보기 
    -->


    <div id="root"></div>

    <script>
      //  스프링에서 myBatis 로 select 를 수행한 결과를 List<DTO>로 받았다고 가정

      const arr = [
        {
          idx: 1,
          name: "새벽 겨울 딸기 500G(팩)",
          salesPrice: 9990,
          grade: 4.6,
        },
        {
          idx: 2,
          name: "알큰 딸기 700G(박스)",
          salesPrice: 14990,
          grade: 4.5,
        },
        {
          idx: 3,
          name: "살살 녹는 장희 딸기 750G(팩)",
          salesPrice: 22990,
          grade: 4.1,
        },
        {
          idx: 4,
          name: "슈퍼푸드 블루베리(칠레) 310G(팩)",
          salesPrice: 9990,
          grade: 4.6,
        },
      ];

      console.log(arr);



      //    arr 에 있던 요소들을    div root 에 넣기
      const root = document.getElementById("root");
      arr.forEach((dto) => {
        let tag = "";
        tag += `<div class="item">`;        //  백틱(``) 을 이용
        tag += `    <div class="idx">${dto.idx}</div>`;
        tag += `    <div class="name">${dto.name}</div>`;
        tag += `    <div class="salesPrice">${dto.salesPrice}</div>`;
        tag += `    <div class="grade">${dto.grade}</div>`;
        tag += `</div>`;

        root.innerHTML += tag;
      });
    </script>
  </body>
</html>

 

03   다른 사이트에 있는 json 파일 내용을 출력하기  

장점

  • 미리 데이터를 준비하지 않아도 된다.
  • 데이터를 내가 직접 관리할 필요가 없다

 

주의할 점

  • 해당 파일이 어떤 내용을 가지고 있는지 먼저 파악해야한다 (이름이 일치해야 출력할 수 있기 때문)
<style>
      #root {
        width: 900px;
        margin: auto;
      }
      .item {
        display: flex;
        border: 2px solid grey;
        margin: 20px;
        padding: 20px;
        background-color: ivory;
     
      }
      .item > div {
        flex: 1;
      }
      .item:hover {
        background-color: rgb(123, 155, 181);
        border: 2px solid black;
        color: rgb(255, 255, 255);
        font-weight: bold;
        
      }
      .item > div:nth-child(2) {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <h1>JSON 파일 내용 불러와서 화면에 출력하기</h1>
    <hr />

    <div id="root"></div>

    <script src="homeplus(berry).js"></script>
    <script>
      console.log(arr);

      const root = document.getElementById("root");


      //    원하는 조건으로 정렬한 이후에 json 데이터로 반영할 수 있다 
      //    가격순 또는 상품명순 으로 정렬 가능 
      //    이러한 기능들은 특정 기능을 함수로 만들어두는 것이 좋음 
      arr.sort((a, b) => a.price - b.price)

      //    json 데이터를 화면에 반영하는 코드
      arr.forEach((dto) => {
        let tag = "";

        tag += `<div class="item">`;
        tag += `    <div class="name">${dto.name}</div>`;
        tag += `    <div class="price">${dto.price}원</div>`;
        tag += `    <div class="salePrice">${dto.salePrice}원</div>`;
        tag += `    <div class="salesCount">${dto.salesCount}</div>`;
        tag += `    <div class="grade">${dto.grade}점</div>`;
        tag += `    <div class="reviewCount">${dto.reviewCount}</div>`;
        tag += `</div>`;

        root.innerHTML += tag;
      });
    </script>
  </body>
</html>

 

미리 데이터를 직접 준비하지 않아도 된다는 점이 너무 편하다.

 

그러나, 여태껏 DB에 있는 데이터를 불러와서 출력하는 경우가 많았기 때문에,

dto.컬럼이름으로 값을 불러오기만 하면 됐었는데

 

다른 사이트에 있는 데이터의 속성에는 어떤 것이 있는지 미리 파악하는 것이 좋은 방법이라 생각한다.

저작자표시

'JavaScript' 카테고리의 다른 글

[JavaScript] hidden 활용  (1) 2024.10.11
[JavaScript] AJAX  (0) 2024.10.10
[JavaScript] Search Filter  (0) 2024.10.10
[JavaScript] ClickEvent  (0) 2024.10.10
[JavaScript] 정렬  (7) 2024.10.09

관련글

티스토리툴바