반응형

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

 

[IT용어] JSON(JavaScript Object Notation)

JSON(JavaScript Object Notation) 개념 경량(Lightweight)의 DATA-교환 형식이다. 경량(Lightweight)의 DATA-교환 형식~ 경량(Lightweight)의 DATA-교환 형식~~!! 속성-값 쌍 || 키-값 쌍으로 이루어진 데이터 오..

java119.tistory.com

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/

 

 

반응형
  1. 뉴비 2020.07.10 17:30

    감사합니다

  2. BlogIcon 싹튼 2020.07.13 16:18

    Api요청한 데이터를 json으로 받아 일부의 value를 수정하고, 원래받은 형식 그대로 json으로 요청을 해야하는데자바로 다루기에는 힘든것 같아서 자바스크립트를 보고 있습니다

    혹시, json 데이터를 가져와서 특정 키값을 접근하여 수정하는 법을 다루어 주실수 있나요???

  3. 지나가던사람 2020.09.02 15:16

    감사합니다!!

  4. 감사합니다. key 값에 따른 value 값을 추출할려고 했는데 도와주셨넨요

  5. 초초급 2021.08.06 12:45

    정말감사합니다! 덕분에 JSON을 이해하는데 있어서 정말 많은 도움이 되었습니다!

+ Recent posts