Script

JSON 본문

Javascript

JSON

scripter. 2022. 6. 17. 15:48

JSON-JavaScript Object Notation

자바스크립트에서 데이터를 저장하는 방식

 

1.Object를 Json으로 변환

stringify

//stringify(obj)
let json = JSON.stringify(true);
console.log(json);//true

json = JSON.stringify(['apple','banana']);
console.log(json);//["apple","banana"]


const rabbit = {
  name: 'tori',
  color: 'white',
  size: null,
  birthDate: new Date(),
  jump: () => {
    console.log(`${this.name}can jump!`);
  }
};

json = JSON.stringify(rabbit);
console.log(json);//jump를 제외한 값들만 출력된다
                  //함수는 object에 있는 데이터가 아니기 때문이다 

json =JSON.stringify(rabbit,['name','color','size']);
console.log(json);//{"name":"tori","color":"white","size":null}
                  //특정 key값들만 골라서 출력할 수 있다.

json = JSON.stringify(rabbit, (key,value)=>{
  console.log(`key:${key},value:${value}`);//
  return key === 'name' ? 'ellie' : value;//key가 name이면 eliie로 아니면 원래 value값으로 
})
console.log(json);

 

2.JSON을 Object로 변환

parse

//parse(json)
json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);//{name: 'tori', color: 'white', size: null, birthDate: '2022-06-17T06:21:36.099Z'}
rabbit.jump();//can jump!
obj.jump();//Error
           //JSON에는 함수를 제외한 데이터들만 전달했다가
           //다시 Object로 변환할때도 함수를 제외한 것들만 전달하므로
           //obj에 jump라는 함수는 들어있지 않다

console.log(rabbit.birthDate.getDate());//현재의 day가 출력
console.log(obj.birthDate.getDate());//Error
//전달되기 전에는 new Date였으나 Json으로 전달된 뒤에  '2022-06-17T06:27:17.976Z'
//같이 만들어 진것이다. 따라서 저 결과값은 JSON에만 있는것이므로 사용할 수 없다
//사용하기 위한 방법-reviver
json = JSON.stringify(rabbit);
const obj = JSON.parse(json,(key,value)=>{
  console.log(`key:${key},value:${value}`);
  return key === 'birthDate'? new Date(value): value;
});
console.log(obj.birthDate.getDate());//현재 시간의 date

 

JSON으로 데이터를 넘겨주기 전에 

JSON에서 권장하는 방식에 맞춰서 차질없이 입력하였는지

(ex-세미콜론이나 콤마를 빼먹는 등의 실수)를 검사하기위해 

json validator(구글에 검색하면 나옴)을 이용하는 것이 좋다

 

'Javascript' 카테고리의 다른 글

Promise  (0) 2022.06.18
Callback  (0) 2022.06.17
배열 api  (0) 2022.06.17
배열  (0) 2022.06.15
object란?  (0) 2022.06.14
Comments