JSON : 기본 개념 및 사용법

JSON : Java Script Object Notation

: 데이터를 저장, 전송, 불러오기

- xml에서 유래

- key : value 의 한쌍으로 이루어짐(pair)

            <-> HashMap(java)

- : (콜론)으로 데이터명과 데이터값을 배치

 

 

 

* JSON 데이터 만들기

1. 1차원배열
var arr = [ 1, 2, 3 ];

 

2. 2차원배열 => json과 유사
var arr2 = [
     [1,2,3],
     [4,5,6]
];

 

3. JSON

var arr = [       // [ ] 로 묶이면 2차원배열

     {                         

          "name" : "홍길동",

          "age" : 24

     },

     {

          "name" : "일지매",

          "age" : 17

     }

];

 

 

4. JSon 데이터 불러오기

 

: 2가지 대표적인 방법이 있음

 

1. arr[0].key값

document.getElementById("demo").innerHTML

     = arr[0].name + " " + arr[0].age;

 

2. arr[0]["key값"]

document.getElementById("demo").innerHTML

     = arr[0]["name"] + " " + arr[0]["age"];

 

 

5. Stirng => Json

 

var arrText = '{ "name": "홍길동", "age":24, "주소":"서울시" }';  // JSON아님 : 앞에 문자열 ' ' 붙어있음

 

var arrText = { "name": "홍길동", "age":24, "주소":"서울시" };  // JSON

 

 

// 문자열로 이루어진 것은 JSon은 아니고 String

// 문자열로는 parsing 이 되지 않음 (JSon아니라서 접근 x)

// String을 JSon데이터로 바꾸어주어야 읽을 수 있음

 

 

// String을 Json으로 바꾸어줌

// JSON.parse( 바꿀변수명 );

var jsonObj = JSON.parse( arrText) ;

 

** JSON 데이터에 접근하여 데이터 가져오기

 

document.getElementById("demo").innerHTML

= jsonObj.name + " " + jsonObj.age+ " " + jsonObj.주소;

 

// 참고 : stringify

// Json => String

var jsonObj2 = JSON.stringify(arrText);

 

</script>

 

<script>

// JSon 데이터 만들기
var arr = [
    {   // [ ] 로 묶이면 2차원배열
        "name" : "홍길동",
        "age" : 24
    },
    {
        "name" : "일지매",
        "age" : 17
    },
    {
        "name" : "성춘향",
        "age" : 25
    }
];
// JSon 데이터 불러오기
document.getElementById("demo").innerHTML 
    // = arr[0].name + " " + arr[0].age;    // 또는
    = arr[0]["name"] + " " + arr[0]["age"];     //2가지의 방법이 있음

// Stirng => Json
var arrText = '{ "name": "홍길동", "age":24, "주소":"서울시" }';    //JSON아님
// var arrText = { "name": "홍길동", "age":24, "주소":"서울시" };    //JSON
// 문자열로 이루어진 것은 JSon은 아니고 String
// 아래코드는 문자열로는 동작이 되지 않음 (JSon아니라서 접근 x)
// String을 JSon데이터로 바꾸어주어야 읽을 수 있음

var jsonObj = JSON.parse(arrText);
// String을 Json으로 바꾸어줌


document.getElementById("demo").innerHTML 
    = jsonObj.name + " " + jsonObj.age+ " " + jsonObj.주소;


// 참고
var jsonObj2 = JSON.stringify(arrText);
// Json => String




</script>