자바스크립트 10. JSON 개념 정리 와 활용방법 및 유용한 사이트 공유 JavaScript JSON

 

자바스크립트 10. JSON 개념 정리 와 활용방법 및 유용한 사이트 공유 JavaScript JSON | 프론트엔드 개발자 입문편 (JavaScript ES6)


client  - server  그 중간의 방법은 http



// JSON
// javascript Object Notation

// 1. Object to JSON
// stringfy(obj)
let json = JSON.stringfy(true);
console.log(json);

json = JSON.stringfy(['apple', 'banana']);
console.log(json);

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

json = JSON.stringfy(rabbit) // 함수는 object에 있는 데이터가 아니기때문에 제외된다. javascript에만 있는 특별한 데이터도 제외 (ex: Symbol)
console.log(json);

// 배열형
json = JSON.stringfy(rabbit, 'name, color'); // 배열로 key값을 입력하면 입력한 property만 정보로 내려준다.
console.log(json);

// callback 함수형
json = JSON.stringfy(rabbit, (key, value) => {
	console.log(`key: ${key}, value: ${value}`);
	return value key === 'name' ? 'ellie' : value;
})
console.log(json);


// 2. JSON to Object
// parse(json)
json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);
rabbit.jump(); 함수 메서드를 가지고 있다.
obj.jump();   rabbit -> stringfy -> obj 함수 메서드는 가지고 있지않다.

const obj = JSON.pares(json, (key, value) => {
	console.log(`key: ${key}, value: ${value}`);
	return key === 'birthDaate' ? new Date(value) : value;
})

console.log(rabbit.birthData.getDate()); new Date()이기때문에 작동 O
console.log(obj.birthDate.getDate());  string형태이기 때문에 작동 X, 콜백함수 이용하면 수정 가능

// 유용한 사이트

JSON Diff checker: www.jsondiff.com/

JSON Beautifier/editor: jsonbeautifier.org/

JSON Parser: jsonparser.org/

JSON Validator: tools.learningcontainer.com/json-validator/

 

// 참조

https://www.youtube.com/watch?v=FN_D4Ihs3LE