10강. JSON

HTTP: hyperText Transfer Protocol _ client와 server의 소통

 

AJAX( Asynchronous JavaScript And XML )

- XHR( XMLHttpRequest ): 브라우저 api obj, 서버에 data요청, 수령

- fetch() API (ie X)

- JSON( JavaScript Object Notation ): ECMAScript 3rd 1999 에서 영감을 받아 생성됨

  - Object( key; value }

  - simplest data interchange format

  - lightweight text-based struncture

  - easy to read

  - key-value pairs

  - used for serialization and transmission of data between the network the network connection

  - independent programming language and platform : C, C#, JAVA, PHP..

 

JSON

JavaScript Object Notation

1. Object to JSON _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:() => {		//함수포함x
    console.log(`${this.name} and jump!`);
    },
};
json = JSON.stringify(rabbit);
console.log(json);	//{"name": "tori", "color": "white", "size": null, "birthDate": "2020-07-20"}
    
json = JSON.stringify(rabbit, ['name', 'color', 'size']);
console.log(json);	//{"name": "tori", "color": "white", "size": null}

json = JSON.stringify(rabbit, [rabbit, (key, value)=>{
	console.log(`key: ${key}, value: ${value}`);
	return value;
});	//각 key와 value값

json = JSON.stringify(rabbit, [rabbit, (key, value)=>{
	console.log(`key: ${key}, value: ${value}`);
	return key === 'name' ? 'ellie' : value;
});	//각 key와 value값

 

2. JSON to Object _parse(json)

json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(json);

console.log(obj);	//{name:"tori", color:"white", size:null,, birthDate:"2020-07-20"}
rabbit.jump();	//can jump!
obj.jump();	//함수존재x

console.log(rabbit.birthDate.getDate()); //29
console.log(obj.birthDate.getDate()); //error

 

- Website추천

  JSON Diff

  JSON Beautifier

  JSON parser

  JSON Validator