[JavaScript] JSON 데이터 다루기 문법 총 정리

JSON(JavaScript Object Notation)을 모른다면 선행 해야 할 글

[IT용어] JSON(JavaScript Object Notation)

JSON의 개념은

위 글에서 설명하였으니, 먼저 보시기 바랍니다.

 

저도 처음에 JSON 데이터를 다룰 때 상당히 삽질을 많이 했는데요.

그러한 피해자(?)가 더 없게 문법 정리정리해보았습니다.

 

다양한 예제를 제공하니 하나 하나 직접 해보시면서 이해하길 바랄게요.

바로 문법 진행하겠습니다.

 

문법

---

key : value 형식

 

문법 양식

---

 {

    "key": "value",
    "key": "value",
    "key": "value"

}

key : value만 기억하자

 

문법 제공

---

1. 쉬운예제

2. 복잡한예제 1,2,3 유형

3.json 파일 형태 데이터 추출

4.json 형식 ajax 통신 데이터 추출

 

 

JavaScript에서 JSON 데이터 뽑기,추출하기

---

쉬운 예제

 

JSON 형태 데이터

var param1= {

    "fruit": "Apple",
    "size": "Large",
    "color": "Red"

}

JavaScript

$(document).ready(function(){

jsonTest();

})

function jsonTest(){

console.log(param1.fruit);
console.log(param1.color);
}        

결과

간단 설명

---

처음 하신분들이 많이 당황하는게 굉~장히 복잡한 포맷 때문인데

자세히 보면 아주 쉽습니다.

 

먼저 JSON 형식 데이터를 param1이라는 변수에 담았으니 param1.으로 시작하는게 맞는거죠 이해 됐죠잉

Map에서 배웠다시피 객체를 뽑을 때 "key"로 뽑는다고 했죠 "key"로~

 

그리고 JSON은 key : value 포맷이라고 했죠

그래서 param1.key 즉, param1.fruit , param1.size , param1.color가 되는 겁니다.

(간단 설명은 쉬운 예제에만 제공됩니다 다른 예제들은 보면서 감을 익히시면 됩니다.)

 

 

복잡한 예제

 

JSON 형태 데이터

var param2 = {
    "quiz": {
        "sport": {
            "q1": {
                "question": "Which one is correct team name in NBA?",
                "options": [
                    "New York Bulls",
                    "Los Angeles Kings",
                    "Golden State Warriros",
                    "Huston Rocket"
                ],
                "answer": "Huston Rocket"
            }
        },
        "maths": {
            "q1": {
                "question": "5 + 7 = ?",
                "options": [
                    "10",
                    "11",
                    "12",
                    "13"
                ],
                "answer": "12"
            },
            "q2": {
                "question": "12 - 8 = ?",
                "options": [
                    "1",
                    "2",
                    "3",
                    "4"
                ],
                "answer": "4"
            }
        }
    }
}

JavaScript

$(document).ready(function(){
jsonTest();
})

function jsonTest(){
console.log(param2.quiz["sport"].q1.question);
console.log(param2.quiz["sport"].q1.options[2]);
console.log(param2.quiz["sport"].q1.answer);

console.log(param2.quiz["maths"].q1.question);
console.log(param2.quiz["maths"].q2.question);
}

결과

 

복잡한 예제 2

 

JSON 형태 데이터

var param3 = {"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}

JavaScript

$(document).ready(function(){

jsonTest();

})

function jsonTest(){
console.log(param3.menu.popup.menuitem[1].value);
console.log(param3.menu.popup.menuitem[0].onclick);
}

결과

 

복잡한 예제 3

JSON 형태 데이터

var param4 = {

    "glossary": {
        "title": "example glossary",
"GlossDiv": {
            "title": "S",
"GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Standard Generalized Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
  "para": "A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso": ["GML", "XML"]
                    },
"GlossSee": "markup"
                }
            }
        }
    }
}

JavaScript

$(document).ready(function(){

jsonTest();

})

function jsonTest(){
console.log(param4.glossary.GlossDiv.GlossList.GlossEntry.GlossDef.para);
console.log(param4.glossary.GlossDiv.GlossList.GlossEntry.GlossDef.GlossSeeAlso[0]);
}

결과

---

이 방법은 jQuery 플러그인이 필수로 필요합니다.

jQuery(JavaScript)에서 .JSON 파일로 된 import(파일 데이터 뽑기,추출하기)

 

js_jsonEx1.json 파일의 경로 (Spring MVC 기준입니다 참고바랍니다.)

 

파일 내용

[{"id":1,"first_name":"Eolanda","last_name":"Druce","email":"edruce0@cbsnews.com","gender":"Female"},
{"id":2,"first_name":"Hyman","last_name":"Steely","email":"hsteely1@columbia.edu","gender":"Male"},
{"id":3,"first_name":"Mommy","last_name":"Ghirardi","email":"mghirardi2@rambler.ru","gender":"Female"},
{"id":4,"first_name":"Darnall","last_name":"Earry","email":"dearry3@irs.gov","gender":"Male"},
{"id":5,"first_name":"Lionello","last_name":"Le Franc","email":"llefranc4@home.pl","gender":"Male"},
{"id":6,"first_name":"Chastity","last_name":"Egle","email":"cegle5@linkedin.com","gender":"Female"},
{"id":7,"first_name":"Moe","last_name":"Pryde","email":"mpryde6@clickbank.net","gender":"Male"},
{"id":8,"first_name":"Erminia","last_name":"Brigden","email":"ebrigden7@dedecms.com","gender":"Female"},
{"id":9,"first_name":"Ingram","last_name":"Nestoruk","email":"inestoruk8@weibo.com","gender":"Male"},
{"id":10,"first_name":"Joanie","last_name":"Von Der Empten","email":"jvonderempten9@bloomberg.com","gender":"Female"}]

파일 제공

---

js_jsonEx1.json

0.00MB

 

 

JavaScript

$.getJSON('/resources/external_json/js_jsonEx1.json', function(data) {

for(key in data){
    console.log("first Name :"+data[key].first_name+" , last Name :"+data[key].last_name);
		}
    });

결과

 

간단 설명

---

 $.getJSON('/resources/external_json/js_jsonEx1.json', function(data)

해당 url 매개변수에 '/resources/external_json/js_jsonEx1.json'가 들어가서 경로를 확인 후 파일에 있는 내용을 스캔합니다.

스캔된 내용을 function(data) 데이터 인자에 넣어줍니다.

 

여기서 $.getJSON('/resources/external_json/js_jsonEx1.json', function(data) 부분의 data는 파일이 스캔된 데이터를 인자로 넘겨받는거기 때문에 꼭 이름이 data가 아니여도 됩니다.

예를 들어

$.getJSON('/resources/external_json/js_jsonEx1.json', function(people) {

for(key in people){
    console.log("first Name :"+people[key].first_name+" , last Name :"+people[key].last_name);
	}
    });

data -> people로 변경하여도 정상적으로 동작합니다.

 

 

 

아 ajax로 JSON 데이터를 받으신다구요? 알겠습니다.

jQuery(JavaScript)에서 ajax 통신 JSON 형태로 된 데이터 뽑기,추출하기

function jQueryajaxJSON(){

$.ajax({

url : "/jquery/jqueryData",
dataType : "json",
success:function(data){

for(key in data){
console.log(data[key].first_name);
console.log(data[key].last_name);
console.log(data[key].email);
}
}
})
}

결과

---

+추가(20191206)

 

JSON(Object) 키만 추출하기

 

REST API를 조회해서 뽑거나 .json 파일을 받았다면 데이터가 와장창 쏟아져 나오게 되는데요,

당황하지 않고 뽑으려면 Object의 KEY만 추출해서 데이터 가공을 한다면 훨씬 수월합니다.

 

 

JSON KEY 추출

---

첫 번째 방법

Object.keys(ObjData)

두 번째 방법

Object.getOwnPropertyNames(ObjData)

 

JSON(Object) length 추출

---

var obj_length = Object.keys(ex_obj).length;

 

 

JSON 형태의 String(스트링) 값 JSON으로 변환

String -> JSON

---

JSON.parse(text[, reviver])

var json = '{"result":true, "count":42}';
obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

주의 : 모든 String이 변환되는 것이 아니라 JSON 형태로 된 String만 변환됩니다. 에러가 뜨셨다면 문법을 확인해주세요.

 

 

JSON -> String

---

JSON.stringify()
JSON.stringify({});                  // '{}'
JSON.stringify(true);                // 'true'
JSON.stringify('foo');               // '"foo"'
JSON.stringify([1, 'false', false]); // '[1,"false",false]'
JSON.stringify({ x: 5 });            // '{"x":5}'

 

내가 받아온 값의 타입이 String인지 JSON(Object)인지도 모른다면?

console.log(typeof '타입확인할값');

typeof 쓰시면 됩니다.

 

이 정도만 알고 있어도 JSON 데이터를 JavaScript/jQuery로 뽑는데 문제없다고 봅니다.

만약 자기가 원하는 방법이 없으신 분들은 덧글 남겨주세요. 글 업데이트하겠습니다 

 

JSON 모의(가짜) 데이터 만드는 사이트

https://www.mockaroo.com/