JSON(JavaScript Object Notation) 사용하기

 

 

1. JSON

---

JSON은 자바스크립트에서 객체를 만들 때 사용하는 표현식을 말한다. JSON형식이라고 말을 하며 컴퓨터나 사람이 이해하기 쉬우며 데이터의 용량도 작아 최근에는 XML을 대신하여 JSON을 사용하기도 한다.

 

 

2. JSON API

---

JSON.parse(str) : 문자열 파라미터를 자바스크립트의 객체로 만들어준다.

 

JSON.stringify(ob) : 객체 파라미터를 JSON 포멧으로 바꿔준다.

 

 

JSON은 서버와 통신하면서 주고받을때 문자열 형식으로 받아 다시 JSON형식으로 바꾸어 사용하기 위해 JSON.parse/stringify를 사용한다.

 

    var person = '{\
        "number" : "01",\
        "name" : "꾸생",\
        "id" : "abcd1234"\
    }';

    var info = JSON.parse(person);
    var infoStr = JSON.stringify(info)

    console.log(info);
    console.log(infoStr);

 

 

 

JSON

 

자바스크립트로 JSON 파일 읽어오기

---

 

외부 로컬 JSON 파일의 경우

 

1. 자바스크립트 파일과 함께 해당 JSON 파일을 선언해준다.

<script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="javascrip.js"></script>

 

2. JSON 파일 가져오기

var readData = JSON.parse(data);
console.log(readData);

 

 

내부 로컬 JSON 파일의 경우

//함수 본문
function readJSON(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//함수 사용법
readJSON("JSON파일 경로", function(text){
    var Data = JSON.parse(text);
    console.log(Data);
});

 

로컬에서 JSON파일을 읽어오는 경우 비동기 작업이므로 파일이 로드된 후 콜백 함수를 지정해야한다.

 

 

Node.js 또는 브라우저에서 require.js를 사용하는 경우

 

let json = require('../data.json');
console.log(json, 'the json obj');