JavaScript Object Notation

데이터를 구조화하는 표준 포맷, .json 이라는 extension을 가진 text file

특징

1. JavaScript 문법을 기반으로 만들어졌으며 JS Object와 동일하게 동작할 수 있다. number, string, array 전부 value로써 쓰여질 수 있다.
2. JS 문법 기반이기 때문에 접근 방식은 다음과 같다.

    superHeroes["members"][1]["powers"][2];

3. 특정 데이터 포맷을 갖고있는 string이다, property만 갖고 있다.
4. strings이나 property names는 double quote로 둘러싸야한다.
5. ,이나 ; 하나가 JSON file을 망가뜨릴 수 있으므로 주의해야 한다. JSONLint라는 app도 존재.
6. JSON은 JSON, arrays, objects 내에서 것들에 유효한 모든 유형의 데이터를 사용한다.
7. quoted strings만 propertyName로 사용된다.

Deserialization

JSON의 정보를 native object로 꺼내오는 것.

Serialization

JSON의 정보를 string형태로 넣는 것.

Fetch API

1. JSON을 쓰기 위해서 필요한 API
2. Request
3. Response
4. CORS
5. HTTP
6. fetch()
   1. request를 만들거나 resource를 fetching할 때 (window, worker의 global method이다)
   2. fetch하고 싶은 resource로 가는 path를 argument로 받는다.
   3. 서버가 header에 응답하자마자 서버응답이 HTTP error status여도 해당 request에 대한 response로 resolve되는 promise return
7. Converting between objects and text (Deserialization, Serialization)
   1. parse()

      1. JSON(parameter) > JavaScript Object

         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 superHeroesText = await response.text();
         
           const superHeroes = JSON.parse(superHeroesText);
           populateHeader(superHeroes);
           populateHeroes(superHeroes);
         }

      2. exceptions

         1. Parsing Dates

            1. JSON에 있는 date object는 허용안된다. string으로 만들고 나중에 생성자로 만들어야 한다.

               const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
               const obj = JSON.parse(text, function (key, value) {
                 if (key == "birth") {
                   return new Date(value);
                 } else {
                   return value;
                 }
               });
               
               document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

      3. 두번째 para : reviver

         1. value를 뱉기 전에 모든 property를 검사한다.

            const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
            const obj = JSON.parse(text, function (key, value) {
              if (key == "birth") {
                return new Date(value);
              } else {
                return value;
              }
            });
            
            document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

      4. Parsing Functions

         1. function도 string으로 했다가 나중에 바꾸면 된다.

         const text = '{"name":"John", "age":"function () {return 30;}", "city":"New York"}';
         const obj = JSON.parse(text);
         obj.age = eval("(" + obj.age + ")");
         
         document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();

   2. stringify()

      1. Object(parameter) > JSON string

         let myObj = { name: "Chris", age: 38 };
         myObj;
         let myString = JSON.stringify(myObj);
         myString;

      2. exception

         1. Dates
            1. object는 JSON에서 value로 받아들여지지 않는다. stringify로 변환
         2. Functions
            1. function은 JSON에서 value로 받아들여지지 않는다. stringify로 변환