[JAVASCRIPT]1. javascript Json 처리하기

Json이란?

JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999의 일부에 토대를 두고 있다. JSON은 완벽하게 언어로 부터 독립적이지만 C-family 언어 - C, C++, C#, Java, JavaScript, Perl, Python 그외 다수 - 의 프로그래머들에게 친숙한 관습을 사용하는 텍스트 형식이다. 이러한 속성들이 JSON을 이상적인 DATA-교환 언어로 만들고 있다.

JSON은 두개의 구조를 기본으로 두고 있다:

• name/value 형태의 쌍으로 collection 타입. 다양한 언어들에서, 이는 object, record, struct(구조체), dictionary, hash table, 키가 있는 list, 또는 연상배열로서 실현 되었다.
• 값들의 순서화된 리스트. 대부분의 언어들에서, 이는 array, vector, list, 또는 sequence로서 실현 되었다.

이러한 것들은 보편적인 DATA 구조이다. 사실상 모든 현대의 프로그래밍 언어들은 어떠한 형태로든 이것들을 지원한다. 프로그래밍 언어들을 이용하여 호환성 있는 DATA 형식이 이러한 구조들을 근간에 두고 있는 것은 당연하다.

JSON 에서, 이러한 형식들을 가져간다:

object는 name/value 쌍들의 비순서화된 SET이다. object는 { (좌 중괄호)로 시작하고 } (우 중괄호)로 끝내어 표현한다. 각 name 뒤에 : (colon)을 붙이고 , (comma)로 name/value 쌍들 간을 구분한다.

출처 : http://www.json.org/json-ko.html

  처음 Json을 접한 것은 입사후 프로젝트를 봤을 때 였다. 그 전에는 Json을 들어본적은 있지만 'Jason'인줄 알기도 했고 뭔가 전기톱을 든 연쇄살인마의 이름 같기도 했다. 여튼 난 Json을 다루는데 엄청나게 어려움을 겪었다. 그 구조를 이해하지 못하고는 Js의 트리, 메뉴, 그래프를 그리는데 난관에 부딪힐수 밖에 없기 때문에 조금씩 공부를 하기 시작했는 데 아직도 Json은 나에게 어렵다...

그러던 중 차장님에게 추천받은 underscore, knockout 

knockout은 직접적인 json 처리 라이브러리는 아니다. 하지만 underscore은 아주 직접적인 json처리 라이브러리처럼 사용가능해서 애용하고 있다. 편하다. 근데 또 막상 사용하려면 헷갈리니깐 예시를 작성하려고 한다.

이제 기기

귀찮으니 CDNJS를 이용해 underscore 주소만 불러온다.

버전이 다르다면 CDNJS underscore 이라고 구글에 검색하면 최신 주소를 받을수 있음.

 underscore CDNJS
<script src= "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>

예시를 한번 만들어 보자면

var arr_name = [];

//array add -> 'array_name'.push('arrayItem');

arr_name.push("juni");
arr_name.push("mino");
arr_name.push("coco");

var arr_age = [26, 24, 30];

var arr_job = ['worker', 'student', 'superman'];

for(i = 0; i < arr_name.length; i++)
    console.log(arr_name[i]);

for(i = 0; i < arr_age.length; i++)
    console.log(arr_age[i]);

for(i = 0; i < arr_job.length; i++)
    console.log(arr_job[i]);

이렇게 해서 실행해보면 콘솔에 이렇게 찍힘

(Chrome -> F12, ubuntu Chrome -> ctrl + shift + i)

juni
mino
coco
26
24
30
worker
student
superman

object_.object(list, [values]) 
Converts arrays into objects. Pass either a single list of [key, value] pairs, or a list of keys, and a list of values. If duplicate keys exist, the last value wins.

underscore의 object 함수를 살펴보자면 list(배열)의 형태를 object로 바꿔준다. 이 object란게 뭐냐면 바로 Json형태를 가능하게 하는 자바스크립트의 자료형이다!!(지송 이거 안쓸거임)

이걸 사용해서 배열을 객체로 만들어 보겠다

원하는 형태 -> [{name:juni, age:26, job:worker},{...},{....}]

이 형태는 {}가 []로 표현된 형태.

풀어쓰자면 Json Object({})가 여러개! 배열([])로 표시되는 것.

캬캬 역시 어렵게 설명하는 클라스. 

객체를 원소로 가지는 배열. 이라고 말해본다. 좀 맞아야된다. 진짜 

여튼 나는 이렇게 해본다.

// array with object ex) {name : juni}
var obj_name = []; 

for(i = 0; i < arr_name.length; i++)
    obj_name.push({'name' : arr_name[i]});

for(i = 0; i < obj_name.length; i++)
    console.log(obj_name[i]);

결과는!

{name: "juni"}
{name: "mino"}
{name: "coco"}

뭔가 어거지 같지만 내겐 최선이다!

이것이 바로 {key : value} 형태의 Json!

갑자기 응용해 보고 싶어졌다. 바로 단계를 뛰어넘는다!

3단진화!뿌잉

var obj_person = [];

for(i = 0; i < arr_name.length; i++)
    obj_person.push({'name' : arr_name[i], 'age' : arr_age[i], 'job' : arr_job[i]});

for(i = 0; i < obj_person.length; i++)
    console.log(obj_person[i]);

이렇게 해보니깐 와~ 됨 레알 결과 ㄱㄱ

{name: "juni", age: 26, job: "worker"}   //obj_person[0]
{name: "mino", age: 24, job: "student"}   //obj_person[1]
{name: "coco", age: 30, job: "superman"}   //obj_person[2]

이렇게 나온다. 각각을 살펴 보자면 //주석뒤에 변수명 참고!

과연 obj_person만을 출력한다면 결과가 어떨까?

console.log(obj_person);

출력 : (3) [{…}, {…}, {…}]

출력 : 
0:{name: "juni", age: 26, job: "worker"}
1:{name: "mino", age: 24, job: "student"}
2:{name: "coco", age: 30, job: "superman"}
length : 3

이렇게 나오는군. 미안하게도 underscore.js를 쓰지 않고 json을 구성했다.

나는 바보였다. 그래도 underscore은 좋다... 써지는걸 나중에 보여주지