[ JavaScript ] Json

JSON

---

• JSON 데이터 Response 받는 코드

fetch('https://jsonplaceholder.typicode.com/users')
    .then((response) => response.text())
    .then((result) => { console.log(result) });

• JSON(JavaScript Object Notation)

  • 자바 스크립트의 문법과 비슷

  • 사용자 하나의 정보를 객체로 표현(중괄호 이내에 프로퍼티)

  • 여러개의 데이터를 대괄호([])로 표현

  • 프로퍼티의 이름을 반드시 큰따옴표("") 사용해주어야 한다.

  • 값이 문자열인 경우 반드시 큰따옴표("") 사용

  • undefined, NaN, Infinity 등 사용 불가능

  • 주석 추가 불가능

    {
     "attr1":"문자문자열",
     "attr2":0,
     "attr3":15,
     "attr4":["문자열1", "문자열2"]
    }

JSON ↔ 객체 변환

---

• 문자열 → JSON 객체 변환

fetch('https://jsonplaceholder.typicode.com/users')
    .then((response) => response.text())
    .then((result) => { 
        const users = JSON.parse(result); 
        console.log(users.length);
        console.log(users);
        users.forEach((element) => {
            console.log(element.name);
        });
    });

• parse의 결과 배열이 리턴되었음. 아마 가장자리가 []로 되어있어서 그런듯.
• [ ]로 안되있는 경우 테스트.

const test = '{"a":"b"}'
console.log(JSON.parse(test));

• 그냥 Object가 나타나는것을 볼 수 있음.

CRUD

---

• 웹 브라우저가 서버로 보내는 리퀘스트의 종류에 크게 4가지 종류

1. GET : 기존 데이터 조회
2. POST : 새 데이터 추가
3. PUT : 기존 데이터 수정
4. DELETE : 기존 데이터 삭제

Request 테스트

---

• 사이트 => 비공개

• 전체 직원(GET)

    fetch('https://../api/members')
        .then((response) => response.text())
        .then((result) => { 
            console.log(result);
        });

• 특정 직원(GET)

    fetch('https://../api/members/3')
        .then((response) => response.text())
        .then((result) => { 
            console.log(result);
        });

• 직원 추가(POST)

  • fetch에 새로운 argument(옵션 객체) 추가

    • 옵션 객체에 method와 body 추가

  • JSON.stringify : 객체를 JSON 데이터로 변환

    const newMember = {
      name: 'Jerry',
      email: 'jerry@codeitmall.kr',
      department: 'engineering',
    }
    
    fetch('https://../api/members', {
      method: 'POST',
      body: JSON.stringify(newMember),
    }).then((response) => response.text())
      .then((result) => { console.log(result) });

• 직원 변경(PUT)

    const member = {
        name: 'Alice',
        email: 'alice@codeitmall.kr',
        department: 'marketing',
    }
  
    fetch('https://../api/members/2', { // 2번 유저에대한 데이터 수정
        method: 'PUT',
        body: JSON.stringify(member),
    }).then((response) => response.text())
        .then((result) => { console.log(result) });

• 직원 삭제(DELETE)

    fetch('https://../api/members/2', { // 2번 유저에대한 데이터 삭제
        method: 'DELETE',
    }).then((response) => response.text())
        .then((result) => { console.log(result) });