[json] json 사용하기

Json( JavaScript Object Notation ) : Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이다.  기본적으로 Javascript 객체 리터럴 문법을 따르는 문자열이다.

data:javascript object - 필드변수와 함수가 함께 존재
json data - 필드변수만 존재

 

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    }
  ]
}

위처럼 json을 구축했을떄 javascript에서 아래처럼 접근할 수 있다.

superHeroes["members"][1]["powers"][2];

 

두 번쨰 members 객체의 power의 3번쨰 배열 속성에 접근하게 된다.

-> Superhuman reflexes

 

값	타입
2016	숫자(number)
"Super tower"	문자열(string)
true	불리언(boolean)
{inKey : value}	객체(object)
["Radiation resistance", "Turning tiny", "Radiation blast"]	배열(array)
null	널(NULL)

---

JSON메소드

:자바스크립트에서 JSON을 사용하기 위함.

1. JSON.stringify(arg): 객체(object) ~> 문자열(string)

let friends2 = [ {
		"name" : "강호동",
		"language" : "Java"
	}, {
		"name" : "이만기",
		"language" : "JavaScript"
	}, {
		"name" : "서장훈",
		"language" : "Spring"
	}, {
		"name" : "김연아",
		"language" : "Oracle"
	} ]; //json객체 object

console.log(friends2[1].name)

 이만기가 출력된다

∵ 타입이 객체

💡이때, 반드시 키:값 쌍의 형태로 나타내야하며 json의 문법을 따라야 한다.

 

let friends2Str=JSON.stringify(friends2);

console.log(friends2Str)

~>

[{"name":"강호동","language":"Java"},{"name":"이만기","language":"JavaScript"},{"name":"서장훈","language":"Spring"},{"name":"김연아","language":"Oracle"}]

 

2. JSON.parse(arg)는 문자열(string) ~>  객체(object)

 

let friends = `[ {
		"name" : "강호동",
		"language" : "Java"
	}, {
		"name" : "이만기",
		"language" : "JavaScript"
	}, {
		"name" : "서장훈",
		"language" : "Spring"
	}, {
		"name" : "김연아",
		"language" : "Oracle"
	} ]`; //json문자열 string

console.log(friends[1].name)

undefined가 출력된다.

∵타입이 문자열이다. 

💡이때, 배열은  `이 아닌 '를 사용해도 된다.

 

let friendsObj=JSON.parse(friends);

console.log(friendsObj)

$.each(friendsObj, function(){
			tag+='<div style="display:inline-block; padding: 20px;">';
			tag+='<h2>'+this.name+'</h2>'
			tag+='<p>'+this.language+'</p>'
			tag+='</div>';
		})
		$('body').html(tag)

결과