드림코딩 : JS - 10. JSON, this 오류

//JSON
//JavaScript Object Notation
 
//1. Object to JSON
//stringfy(obj)
let json = JSON.stringify(true);
console.log(json);
 
json = JSON.stringify(['apple','banana']);
console.log(json);  //["apple","banana"] 배열 처럼 보이게 출력됨
 
const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    symbol: Symbol("id"),  //자바스크립트에만 있는 것은 제외됨
    jump: () => {
        console.log(`${this.name} can jump!`);   //함수는 제외된다
    },
};
 
json = JSON.stringify(rabbit);
console.log(json);
 
json = JSON.stringify(rabbit, ['name', 'color']);  //{"name":"tori","color":"white"}해당하는 값만 제이슨 형식으로 나타난다
console.log(json);
 
json = JSON.stringify(rabbit, (key, value) => {
    console.log(`key: ${key}, value: ${this.value}`); //this를 꼭 써주어야 한다!!!!!!!!
    return value;   //가장 처음은 raabit의 object를 감싸고 있는 가장 최상위 것이 전달된다
    //return key === 'name' ? 'sigcho' : value;  //{"name":"sigcho" ... }, 세밀하게 통제하고 싶을 때 callback함수 이용한다
});
console.log(json); 
 
 
 
//2. JSON to Object
//parse(json)
console.clear();
json = JSON.stringify(rabbit);  
console.log(json);  //string형태로 출력
const obj = JSON.parse(json,(key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'birthDate' ? new Date(value) : value;  //birthDate를 Date()객체로 만든다
});  //간단하게 전달하고자하는 객체를 넣는다
console.log(obj);  //rabbit 객체 출력 {name: "tori", color: "white", size: null, Date: "2020-05-29T13:32:57"}
rabbit.jump();
//obj.jump();  //오류, Object를 JSON으로 만들때 함수는 변환이 안 됐기 때문
 
console.log(rabbit.birthDate.getDate());  //20
console.log(obj.birthDate); //.getDate()쓰면 오류, birthDate는 string이기 때문에 API 쓸 수 없다
console.log(rabbit.birthDate.getDate()); //위에서 birthDate를 Date()객체로 바꾸었기에 이제는 출력 가능
 
 

 

 

 

30줄 this 오류

오류

 

올바른 값

오류 해결 방법

 

 

 

 

JSON 유용한 사이트

 

http://jsondiff.com서버에 요청 했을 때 처음 받아온 데이터와 두번째 받아온 데이터 차이점 알려준다 디버깅시 유용!!

JSON Diff - The semantic JSON compare tool

jsonbeautifier.org/서버에서 받아온 json 포맷 망가진 경우 > 포맷 다시 만들어줌

Json Beautifier - Json Formatter | Json Viewer | Json Editor

jsonparser.org/ json을 object로 쉽게 확인 가능

JSON Parser - Best JSON Formatter | JSON Editor

tools.learningcontainer.com/json-validator/ json 오류 있는지 확인 가능

Best free online JSON Validator