[자바스크립트 js] AJAX / JSON / Object to JSON / JSON to Object

  JSON

• Javascript Object Notation
• object { key : value }
• 데이터를 주고 받을 수 있을 때 쓸 수 있는 가장 간단한 파일 포맷.
• 프로그램 랭귀지나 플랫폼에 상관 없이 사용 가능하다.

 

 

 

 

  Object to JSON

stringfy(obj)

예문1)
let json = JSON.stringify(true);
console.log(json);

// 결과
// true



예문2)
json = JSON.stringify(['apple', 'banana']);
console.log(json);

// 결과
// ["apple", "banana"]    =>    " "가 JSON 표기 방식.



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

json = JSON.stringify(rabbit);
console.log(rabbit);

// 결과
// {"name":"tori","color":"white","size":null,"birthDate":"2021-06-15T13:20L22.670Z"}
// => jump는 포함 되지 않았다. 함수는 object에 있는 데이터가 아니어서 포함이 안 된다.



예문4)
json = JSON.stringify(rabbit, ["name", "color"]);
console.log(rabbit);

// 결과
// {"name":"tori", "color":"white"}



예문5)
json = JSON.stringify(rabbit, (key, value) => {
	console.log(`key: ${key}, value: ${value}`);
    return value;
});

// 결과
// key: name, value: tori ... 아래로 쭉 나옴.



예문6)
json = JSON.stringify(rabbit, (key, value) => {
	console.log(`key: ${key}, value: ${value}`);
    return value === 'name' ? 'Tooktak' : value;
});

 

 

 

 

  JSON to Object

parse(json)

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



예문1)
json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);
//obj.jump(); 함수는 포함이 안 된다.


console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate());


// 결과
// {name: "tori", color: "white", size: null, date: "2021-06-16T13:33:09.776Z"}
// 16
// Error => string형태로 날짜를 가져오기 때문에.





예문2)
// reviver
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());


// 결과
// 16

 

 

 

 

  유용한 사이트

http://www.jsondiff.com/

서버에게 요청했을 때 첫번째로 받아온 데이터와 두번째로 받아온 데이터 비교 가능.

 

https://jsonbeautifier.org/

포맷을 예쁘게 변경 가능

 

https://jsonparser.org/

json을 object형태로 확인하고 싶을 때.

 

https://tools.learningcontainer.com/json-validator/

json이 이상할 때 어디가 잘못 됐는지 체크 받을 수 있다.

 

https://ko.javascript.info/json

json 용어 정리

 

 

 

 

  Ajax

• Asynchronous Javascript And Xml
• 객체를 사용해 구현하는 비동기 통신 방법.
• 비동기 통신 : 페이지 전환 없이 서버와 통신하는 것. (동기는 화면이 갱신된다.)

 

 

 

  ajax 메소드

1. GET - /data : 모든 데이터를 요청한다.
2. POST - /data : 데이터를 추가한다.
3. GET - /data/n : n번째 데이터를 요청한다.
4. PUT - /data/n : n번째 데이터를 수정한다.
5. DELETE - /data/n : n번째 데이터를 제거한다.