8. JSON
11671 단어 드림코딩JavaScriptTILJavaScript
JSON
1. JavaScript Object Notation의 약자
2. object{key:value}로 이루어짐
3. data를 주고 받을 때 쓰는 가장 간단한 file format
4. data를 sever와 주고 받을 때 serialization을 위해 씀
5. 프로그래밍 언어, 플랫폼에 상관없이 쓰인다
1. Object to JSON
- JSON.stringify()
const rabbit = {
name: `tori`,
color:`white`,
size: null,
birthDate: new Date(),
// symbol: Symbol(`id`), // JS에만 존재하는 data라서 json에 serialize 되지 않는다
// 아래의 함수 문법은 jump: function()과 같음
jump() { // 함수는 object의 data가 아니기 때문에 serialize 되지 않는다
console.log(`${this.name} can jump!`);
}
};
let json = JSON.stringify(true); // 불린값
console.log(json);
json = JSON.stringify([`apple`, `banana`]); // 배열
console.log(json);
json = JSON.stringify(rabbit); // 객체
console.log(json);
json = JSON.stringify(rabbit, ['name', 'color','size']); // 원하는 key의 값만 serialize 할 수 있음
console.log(json);
json = JSON.stringify(rabbit, (key, value) => { // 콜백함수 방법
// console.log(`key: ${key}, value: ${value}`);
// if (key === `name` ) {
// return `ellie`;
// } else {
// return value
// }
return key === `name` ? `ellie` : value; //key에 name이 있다면 ellie라는 value 로 설정하자
});
console.log(json);
2. JSON to Object
- JSON.parse()
json = JSON.stringify(rabbit);
console.log(json);
let obj = JSON.parse(json);
console.log(obj);
// obj.jump();
// error
//함수가 serialize 될 때 jump라는 method는 포함되지 않았음
// console.log(rabbit.birthDate.getDate()); // error
//birthDate는 string이기 때문이다
const obj = JSON.parse(json, (key, value) => {
// console.log(`key: ${key}, value: ${value}`);
return key === `birthDate` ? new Date(value) : value;
});
console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate());
// string을 API로 바꾼 후 역직렬화 해서 29로 출력 됨
## JSON 관련 사이트
JSON Diff -서버요청시 첫번째 두번째 데이터가 다를 경우 비교 문제 디버깅시 유용
JSON Beautifier - 포멧을 에쁘게 만들어줌
JSON -TYPE울 object
JSON Validator -JSON 오류 알려줌
Author And Source
이 문제에 관하여(8. JSON), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@hyejias/9.-JSON
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1. JavaScript Object Notation의 약자
2. object{key:value}로 이루어짐
3. data를 주고 받을 때 쓰는 가장 간단한 file format
4. data를 sever와 주고 받을 때 serialization을 위해 씀
5. 프로그래밍 언어, 플랫폼에 상관없이 쓰인다
- JSON.stringify()
const rabbit = {
name: `tori`,
color:`white`,
size: null,
birthDate: new Date(),
// symbol: Symbol(`id`), // JS에만 존재하는 data라서 json에 serialize 되지 않는다
// 아래의 함수 문법은 jump: function()과 같음
jump() { // 함수는 object의 data가 아니기 때문에 serialize 되지 않는다
console.log(`${this.name} can jump!`);
}
};
let json = JSON.stringify(true); // 불린값
console.log(json);
json = JSON.stringify([`apple`, `banana`]); // 배열
console.log(json);
json = JSON.stringify(rabbit); // 객체
console.log(json);
json = JSON.stringify(rabbit, ['name', 'color','size']); // 원하는 key의 값만 serialize 할 수 있음
console.log(json);
json = JSON.stringify(rabbit, (key, value) => { // 콜백함수 방법
// console.log(`key: ${key}, value: ${value}`);
// if (key === `name` ) {
// return `ellie`;
// } else {
// return value
// }
return key === `name` ? `ellie` : value; //key에 name이 있다면 ellie라는 value 로 설정하자
});
console.log(json);
json = JSON.stringify(rabbit);
console.log(json);
let obj = JSON.parse(json);
console.log(obj);
// obj.jump();
// error
//함수가 serialize 될 때 jump라는 method는 포함되지 않았음
// console.log(rabbit.birthDate.getDate()); // error
//birthDate는 string이기 때문이다
const obj = JSON.parse(json, (key, value) => {
// console.log(`key: ${key}, value: ${value}`);
return key === `birthDate` ? new Date(value) : value;
});
console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate());
// string을 API로 바꾼 후 역직렬화 해서 29로 출력 됨
## JSON 관련 사이트
JSON Diff -서버요청시 첫번째 두번째 데이터가 다를 경우 비교 문제 디버깅시 유용
JSON Beautifier - 포멧을 에쁘게 만들어줌
JSON -TYPE울 object
JSON Validator -JSON 오류 알려줌
Author And Source
이 문제에 관하여(8. JSON), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyejias/9.-JSON저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)