공부/HTML, CSS

JS - JSON 사용 하기 - 자바스크립트 활용 -

캄성 2022. 2. 28. 15:58

newJSON.html
0.00MB

 

JSON.html
0.00MB
style.css
0.00MB
superheroes.json
0.00MB

 

 

참조 : https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON

 

JSON으로 작업하기 - Web 개발 학습하기 | MDN

JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷입니다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용합니다(서버에서

developer.mozilla.org

JSON 파일을 Javascript에서 사용하기 위하여, 서버혹은 로컬에서 읽어 오는 방법

JS - JSON 사용 하기 -  자바스크립트 활용 - 1

 

1. JSON이란 

JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷

 

2. 준비사항 

JSON.html

<!-- https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>Our superheroes</title>

    <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <header>

    </header>

    <section>

    </section>

    <script>

        var header = document.querySelector('header');
        var section = document.querySelector('section');

        var requestURL = './superheroes.json';
        var request = new XMLHttpRequest();
        request.open('GET', requestURL);

        request.responseType = 'json';
        request.send();

        request.onload = function () {
            var superHeroes = request.response;
            populateHeader(superHeroes);
            showHeroes(superHeroes);
        }

        function populateHeader(jsonObj) {
            var myH1 = document.createElement('h1');
            myH1.textContent = jsonObj['squadName'];
            header.appendChild(myH1);

            var myPara = document.createElement('p');
            myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
            header.appendChild(myPara);
        }

        function showHeroes(jsonObj) {
            var heroes = jsonObj['members'];

            for (var i = 0; i < heroes.length; i++) {
                var myArticle = document.createElement('article');
                var myH2 = document.createElement('h2');
                var myPara1 = document.createElement('p');
                var myPara2 = document.createElement('p');
                var myPara3 = document.createElement('p');
                var myList = document.createElement('ul');

                myH2.textContent = heroes[i].name;
                myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
                myPara2.textContent = 'Age: ' + heroes[i].age;
                myPara3.textContent = 'Superpowers:';

                var superPowers = heroes[i].powers;
                for (var j = 0; j < superPowers.length; j++) {
                    var listItem = document.createElement('li');
                    listItem.textContent = superPowers[j];
                    myList.appendChild(listItem);
                }

                myArticle.appendChild(myH2);
                myArticle.appendChild(myPara1);
                myArticle.appendChild(myPara2);
                myArticle.appendChild(myPara3);
                myArticle.appendChild(myList);

                section.appendChild(myArticle);
            }
        }




    </script>
</body>

</html>

 

style.css

/* || general styles */

html {
    font-family: 'helvetica neue', helvetica, arial, sans-serif;
  }
  
  body {
    width: 800px;
    margin: 0 auto;
  }
  
  h1, h2 {
    font-family: 'Faster One', cursive;
  }
  
  /* header styles */
  
  h1 {
    font-size: 4rem;
    text-align: center;
  }
  
  header p {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
  }
  
  /* section styles */
  
  section article {
    width: 33%;
    float: left;
  }
  
  section p {
    margin: 5px 0;
  }
  
  section ul {
    margin-top: 0;
  }
  
  h2 {
    font-size: 2.5rem;
    letter-spacing: -5px;
    margin-bottom: 10px;
  }

superheroes.json

{
  "squadName" : "Super Hero Squad",
  "homeTown" : "Metro City",
  "formed" : 2016,
  "secretBase" : "Super tower",
  "active" : true,
  "members" : [
    {
      "name" : "Molecule Man",
      "age" : 29,
      "secretIdentity" : "Dan Jukes",
      "powers" : [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name" : "Madame Uppercut",
      "age" : 39,
      "secretIdentity" : "Jane Wilson",
      "powers" : [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name" : "Eternal Flame",
      "age" : 1000000,
      "secretIdentity" : "Unknown",
      "powers" : [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

3. 코드 분석

1) 시작 - 참조 설정

var header = document.querySelector('header');
var section = document.querySelector('section');

HTML  에 있는 header 와  section에 표기를 위한 참조 설정

 

2)JSON파일 읽어 오기

- 주소값 참조

var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';

예제에는 주소로 있지만, 파일로 받을 경우  . 아래와 같이 변경해서 사용 가능

var requestURL = './superheroes.json';

- XMLHttpRequest 를 사용하여 인스턴스 생성

var request = new XMLHttpRequest();

- open을 통하여 요청을 만들기 

request.open('GET', requestURL);

- JSON 타입 지정 및 서버에 요청 보내기

request.responseType = 'json';
request.send();

- 서버의 응답 및 처리 

request.onload = function() {
  var superHeroes = request.response;
  populateHeader(superHeroes);
  showHeroes(superHeroes);
}

3) 헤더 조작하기

function populateHeader(jsonObj) {
  var myH1 = document.createElement('h1');
  myH1.textContent = jsonObj['squadName'];
  header.appendChild(myH1);

  var myPara = document.createElement('p');
  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
  header.appendChild(myPara);
}

4) 히어로 정보 카드 만들기

function showHeroes(jsonObj) {
  var heroes = jsonObj['members'];

  for (var i = 0; i < heroes.length; i++) {
    var myArticle = document.createElement('article');
    var myH2 = document.createElement('h2');
    var myPara1 = document.createElement('p');
    var myPara2 = document.createElement('p');
    var myPara3 = document.createElement('p');
    var myList = document.createElement('ul');

    myH2.textContent = heroes[i].name;
    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
    myPara2.textContent = 'Age: ' + heroes[i].age;
    myPara3.textContent = 'Superpowers:';

    var superPowers = heroes[i].powers;
    for (var j = 0; j < superPowers.length; j++) {
      var listItem = document.createElement('li');
      listItem.textContent = superPowers[j];
      myList.appendChild(listItem);
    }

    myArticle.appendChild(myH2);
    myArticle.appendChild(myPara1);
    myArticle.appendChild(myPara2);
    myArticle.appendChild(myPara3);
    myArticle.appendChild(myList);

    section.appendChild(myArticle);
  }
}

 

JSON 파일 읽는 방식

 

request.response['members'][i].powers[j]

기본 Json, 멤버중 members를 일고, 그중 i 번째 값의 power에서 j 번째 값을 읽는다.

이방식으로 안쪽에 글을 읽을 수 있다. 

 

4. 변경사항 

  실제 코드 완성 문을 보면 코드가 아래와 같이 기존가 다른것을 확인 가능 하다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Our superheroes</title>

    <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>

      <header>

      </header>

      <section>

      </section>

    <script>

    async function populate() {

      const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
      const request = new Request(requestURL);

      const response = await fetch(request);
      const superHeroes = await response.json();

      populateHeader(superHeroes);
      populateHeroes(superHeroes);

    }

    function populateHeader(obj) {
      const header = document.querySelector('header');
      const myH1 = document.createElement('h1');
      myH1.textContent = obj['squadName'];
      header.appendChild(myH1);

      const myPara = document.createElement('p');
      myPara.textContent = `Hometown: ${obj['homeTown']} // Formed: ${obj['formed']}`;
      header.appendChild(myPara);
    }

    function populateHeroes(obj) {
      const section = document.querySelector('section');
      const heroes = obj['members'];

      for (const hero of heroes) {
        const myArticle = document.createElement('article');
        const myH2 = document.createElement('h2');
        const myPara1 = document.createElement('p');
        const myPara2 = document.createElement('p');
        const myPara3 = document.createElement('p');
        const myList = document.createElement('ul');

        myH2.textContent = hero.name;
        myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;
        myPara2.textContent = `Age: ${hero.age}`;
        myPara3.textContent = 'Superpowers:';

        const superPowers = hero.powers;
        for (const power of superPowers) {
          const listItem = document.createElement('li');
          listItem.textContent = power;
          myList.appendChild(listItem);
        }

        myArticle.appendChild(myH2);
        myArticle.appendChild(myPara1);
        myArticle.appendChild(myPara2);
        myArticle.appendChild(myPara3);
        myArticle.appendChild(myList);

        section.appendChild(myArticle);
      }
    }

    populate();

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

1) 시작- 실행 함수 작성

    async function populate() {

      const requestURL = './superheroes.json';
      const request = new Request(requestURL);

      const response = await fetch(request);
      const superHeroes = await response.json();

      populateHeader(superHeroes);
      populateHeroes(superHeroes);

    }

 async 비동기 처리 방식 만 변경됨

 

 

'공부 > HTML, CSS' 카테고리의 다른 글

CSS 셀렉터 정리- CSS3 Selector  (0) 2022.04.04
Threejs 따라하기 1 - 설치하기  (0) 2022.02.23

'공부/HTML, CSS'의 다른글

  • 현재글JS - JSON 사용 하기 - 자바스크립트 활용 -

관련글

티스토리툴바