JSON(JavaScript Object Notation)

JSON(JavaScript Object Notation)

경량의 DATA 교환 방식이다. JSON은 사람이 읽을 수 있는 텍스트 기반의 데이터 교환 표준이다. 이러한 JSON은 XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위해서 고안되었다. 또한 JSON은 텍스트 기반이므로 어떠한 프로그래밍 언어에서도 JSON데이터를 읽고 해석 할수 있다.

JSON의 특징

1. JSON은 자바스크립트를 확장하여 만들어 졌다.
2. JSON은 자바스크립트 객체 표기법을 따른다.
3. JSON은 사람과 기계가 모두 읽기 편하도록 고안되었다.
4. JSON은 프로그래밍 언어와 운영체제에 독립적이다.

2. JSON 문법

JSON은 자바스크립의 객체 표기법에서 리터럴과 프로퍼티를 표현하는 방법만 가져와서 사용한다.

JSON은 Key 와 Value값으로 데이터를 표현하며, Object와 Array가 있다.

1. Object

{

"key1": "value1",

"key2": "value2"

}

Object는 key/value로 표현되고 {}중괄호로 시작과 끝을 나타낸다.

1. Array

[

"value1",

"value2",

"value3"

]

Array는 []대괄호로 구분되가 각 요소는 기본 자료형이나 배열, 객체가 될수 있다.

또한, JSON 배열은 쉼표(,)를 사용하여 여러 JSON 데이터를 포함할 수 있다.

dog:

"dog": [

{"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14},

{"name": "콩콩", "family": "포메라니안", "age": 3, "weight": 2.5},

{"name": "젤리", "family": "푸들", "age": 7, "weight": 3.1}

]

또는

{

"name": "hello!",

"data": {

"name": "jspiner",

"age": 8,

"birth": 1996

},

"friends": [

"john",

"smith",

"sam"

],

"books": [

{

"name": "book1",

"price": 10000

},

{

"name": "book2",

"price": 15000

},

{

"name": "book3",

"price": 7000

}

]

}

이렇게 데이터를 표현하면 프로그래밍 언어와 플랫폼에 독립적이기 때문에 서로 다른 시스템 간에 통신을 하기에 용의하다.

3. JSON 파싱하기

JSON포맷을 이해할 수 있는 자료형으로 파싱하기 위한 다양한 라이브러리 들이 있다. 그중 가장 많이 쓰이는 JSON 메소드를 살펴본다

JSON.stringify()

JSON.stringify( )는 자바스크립트의 값을 JSON 문자열로 변환한다.

메소드 형태

JSON.stringify( value , replacer __, space__ )

value (필수): JSON 문자열로 변환할 값이다.(배열, 객체, 또는 숫자, 문자 등이 될 수 있다.)

replacer (선택): 함수 또는 배열이 될 수 있다. 이 값이 null 이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함된다.

space (선택): 가독성을 목적으로 JSON 문자열 출력에 공백을 삽입하는 데 사용되는데,

[함수일 때]

문자열화 프로세스의 작동을 변경하는 함수로 사용할 수 있다.

문자열화 될 key와 value, 2개의 매개변수를 받는다.

function replacer(key, value) {

if (typeof value === ‘string’) {

return undefined;

}

return value;

}

var foo = {name: ‘jason’, nickname: ‘ball’, weight: 75};

var useJson = JSON.stringify(foo, replacer);

console.log(useJson) // {"weight":75}

[배열일 때]

배열의 값과 일치하는 값만 문자열화 된다.

var foo = {name: ‘jason’, nickname: ‘ball’, weight: 75};

var useJson = JSON.stringify(foo, [‘nickname’, ‘weight’]);

console.log(useJson); // {“nickname”:”ball”,”weight”:75}

[string일 때]

입력한 string이 공백으로 사용된다.

var space = JSON.stringify({a: 2}, null, ‘string’);

console.log(space);

// {

// string”a”: 2

// }

[number일 때]

입력한 숫자만큼 공백이 생긴다.

var space = JSON.stringify({a: 2}, null, 5);

console.log(space);

// 5칸의 공백

// {

// “a”: 2

// }

JSON.stringify() 특성

value의 데이터 타입이 number 또는 boolean일 경우, 그 값 자체를 그대로 가져오고, 데이터타입은 string(문자열)이 된다.

JSON.stringify(7) // 7

JSON.stringify(true) // ‘true’

JSON.stringify(null) // null

value의 데이터 타입이 string일 경우, 그 값 자체가 string이 된다.

JSON.stringify(‘foo’) // “‘foo’”

value가 배열일 경우, 그 배열 자체가 string이 된다.

JSON.stringify([1, 'true', true]); // '[1,"true",true]'

value가 배열인데, 배열안에 undefined, 함수, 또는 심볼(symbol)이 있을 경우, 이런 값들은 null로 변환된다.

JSON.stringify([“a”, 7, undefined, function(){return 8}, Symbol(‘’)])

// “[“a”,7,null,null,null]”

value가 객체일경우, 그 객체 자체가 string이 된다. 이때, 객체의 속성(property)들은 꼭 순서대로 문자열화 되지 않는다.

JSON.stringify({ x: 1, y: 2});

// '{"x":1,"y":2}' 또는 '{"y":2,"x":1}'

value가 객체인데, 객체안에 undefined, 함수, 또는 심볼(symbol)이 있을 경우, 이런 값들은 생략된다.

JSON.stringify({ a: 8, x: undefined, y: function(){return 8}, z: Symbol(‘’) });

// “{“a”:8}”

JSON.parse()

JSON.parse( )는 String 객체를 JSON 문자열로 변환한다.

메소드형태

JSON.parse(text[, reviver])

text(필수): JSON문자열로 바꿀 String객체 이다.

reviver(선택): 함수가 올 경우, 리턴되기 전에 파싱된 문자열 값이 어떻게 변환될 것인지를 결정함.

JSON.parse('{}'); // {}

JSON.parse('true'); // true

JSON.parse('"foo"'); // "foo"

JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]

JSON.parse('null'); // null

reviver 가 주어지면, 파싱된 값이 리턴되기 전에 변환된다.

구체적으로 말하면, 파싱되는 값과 그 값의 프로퍼티들(가장 멀리 떨어진 프로퍼티 부터 시작하여 본래 파싱되는 값까지 거슬러감)은 각기 reviver에 의해 처리된다. reviver는 this로 선언된 프로퍼티와 프로퍼티의 이름 그리고 프로퍼티의 값이 포함된 오브젝트와 함께 호출된다.

만약 reviver 함수가 undefined를 반환 하거나 반환 값 없이 함수 실행이 종료되면 해당 프로퍼티는 반횐되는 오브젝트로 부터 삭제된다. 그외의 경우에는 변환되어 반환된다

JSON.parse('{"p": 5}', function(k, v) {

if (k === '') { return v; } // if topmost value, return it,

return v * 2; // else return v * 2.

}); // { p: 10 }

JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function(k, v) {

console.log(k); // log the current property name, the last is "".

return v; // return the unchanged property value.

});

// 1

// 2

// 4

// 6

// 5

// 3

// "".

JSON 예제 JSON.parse(), JSON.stringify()

$(document).ready(function(){

//기존 JSON obj를 String으로 만들었습니다.

var obj = '{ "NAME" : "Garry", "AGE" : 25, "jobTitle" : "Front End Technical Lead", "JOB" : "Photographer" }';

console.log("--------------obj result ----------");

console.log(obj);

//JSON obj로 만들기

var jsonObj = JSON.parse(obj);

console.log("--------------JSON.parse(obj) result ----------");

console.log(jsonObj);

//다시 String으로 만들기

var jsonStr = JSON.stringify(jsonObj);

console.log("--------------JSON.stringify(jsonObj) result ----------");

console.log(jsonStr);

});

결과값

복수의 데이터라면 배열을 사용하여 나열이 가능하며 점(.) 으로 데이터 값 순서의 KEY값에 접근이 가능하다.

$(document).ready(function(){

var obj = { "peoples" : [

{ "NAME" : "Garry", "AGE" : 25, "jobTitle" : "Front End Technical Lead", "JOB" : "Photographer" },

{ "NAME" : "Merry", "AGE" : 30, "jobTitle" : "Developer", "JOB" : "Developer" },

{ "NAME" : "Heather", "AGE" : 25, "jobTitle" : "Designer", "JOB" : "Designer" }

]

};

console.log("--------------obj result ----------");

console.log(obj);

console.log("--------------obj.people.[0].NAME result ----------");

console.log(obj.peoples[0].NAME);

console.log("--------------each result ----------");

$(obj.peoples).each(function(index, people){

console.log(index + " ::: " , people.NAME);

});

});

결과값