What is JSON? 2017.04.14 유호성.

Presentation on theme: "What is JSON? 2017.04.14 유호성."— Presentation transcript:

1 What is JSON? 유호성

2 JSON? What is JSON? Why is JSON? JSON Syntax JSON Parse JSON Stringify Use JSON in QT&QML

3 JSON( Javascript Object Notation )?
주로 사용되는 방법( 자바스크립트 표준 객체표기법 )이지만 대부분의 언어에서 사용 가능하고, 컴퓨터 프로그램의 변수 값을 표현하는데 적합하다. 2. What is JSON JSON은 간단한 데이터 교환 형식으로 데이터 저장 및 교환을 위한 구문이다. 자바스크립트 객체 표기법으로 작성된 텍스트이다. JSON은 텍스트이기 때문에 이해하기 쉽다. JSON은 텍스트이기 때문에 모든 언어에서 사용할 수 있다. 문자열을 사용하므로 overhead 거의 없다. 최신 브라우저는 대부분 JSON 파서를 내장하므로 사용하기 편하다. JSON 파서가 없을 경우 자바스크립트 문법을 사용했으므로 eval 명령으로 사용 가능

4 3. Why is JSON? JSON 형식은 텍스트 형식이므로 서버와 주고받을 수 있으며 모든 프로그래밍 언어에서 데이터 형식으로 사용된다. XML의 대안으로 XML보다 사용하기 쉽다 JSON을 사용하면 JavaScript 객체를 텍스트로 저장할 수 있다. JavaScript에는 JSON 형식으로 작성된 문자열을 JavaScript 객체로 변환하는 내장 함수가 있다. JSON.parse( JSON_DATA_TEXT ) 서버에서 JSON 형식( string )으로 데이터를 받을 경우 JSON.parse() 함수를 이용해서 JavaScript 객체처럼 사용할 수 있다. JavaScript에는 JSON을 string으로 변환하는 내장 함수가 있다. JSON.stringify() JavaScript 객체에 저장된 데이터가 있으면 객체를 JSON( 텍스트 )으로 변환하여 서버로 보낼 수 있다 브라우저와 서버간에 데이터를 교환 할 때 데이터는 텍스트 일뿐입니다 JSON은 텍스트이며 모든 JavaScript 객체를 JSON으로 변환하고 JSON을 서버로 보낼 수 있습니다 서버에서받은 JSON을 JavaScript 객체로 변환 할 수 있습니다. 복잡한 파싱 및 번역 작업없이 데이터를 JavaScript 객체로 처리 할 수 있습니다.

5 4. JSON Syntax JSON 문법은 JavaScript의 subset 이며 JavaScript object notation syntax에서 파생되었다. JSON Syntax Rules Data는 name(key)/value 쌍으로 이루어져있다. Data는 comma(,)로 구분한다. Object는 중괄호( {,} )을 사용하여 시작/끝을 표시한다. 배열은 대괄호( [,] )를 사용하여 시작/끝을 표시한다. JSON Data ( Name and Value ) Ex) “name”:”유호성” JSON의 name(key)은 항상 string 이기 때문에 JavaScript와 다르게 “,”가 필요하다. JSON의 value는 string/number/an object(JSON object)/array/Boolean/null을 사용할 수 있다. Function / date(날짜) / undefined 는 사용할 수 없다. JSON Objects { “employee”:{“name”:”John”, “age”:30, “city”:”New York”}} JSON Arrays {“Names”:[“John”, “Anna”, “Peter”]} JSON File JSON 파일 포맷은 “.json” 이다. MIME type은 “application/json” 이다.

6 4. JSON Syntax JSON Object

7 4. JSON Syntax JSON Object

8 4. JSON Syntax JSON Object

9 4. JSON Syntax JSON Array [“Ford”, “BMW”, “Fiat”] 배열을 객체의 property가 될 수 있다.

10 4. JSON Syntax JSON Array

11 5. JSON Parse JSON From the Server Exceptions Date(날짜) 객체는 JSON에서 사용할 수 없음, 날짜를 포함할 경우 string 으로 변환하여 사용

12 5. JSON Parse Exceptions Date(날짜) 객체는 JSON에서 사용할 수 없음, 날짜를 포함할 경우 string 으로 변환하여 사용 or

13 5. JSON Parse Exceptions Function은 JSON에서 사용할 수 없음, Function은 범위를 잃어 버림 다시 함수로 변환하려면 eval()을 사용해야 함

14 6. JSON Stringify Server로 데이터를 보낼 때는 문자열로 보낸다. JSON.stringify() 는 JavaScript 내장 함수로 JavaScript 객체를 문자열로 변환한다.

15 7. Use JSON in QT & QML QT에서 사용할 수 잇는 JSON 객체는 QJsonDocument / QJsonObject / QJsonArray 객체가 있다. QML에서는 QML 기반으로 만든 JSONListModel 이라는 Util을 사용 할 수 있다.

16 7. Use JSON in QT & QML QML JSON 사용 예제 소스 import QtQuick 2.0
import QtQuick.Controls 1.2 Item { width: 300 height: 400 ListModel { id: model } ListView { id: listview anchors.fill: parent model: model delegate: Text { text: listdata function getData() { var xmlhttp = new XMLHttpRequest(); var url = " xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == XMLHttpRequest.DONE && xmlhttp.status == 200) { myFunction(xmlhttp.responseText); xmlhttp.open("GET", url, true); xmlhttp.send(); function myFunction(response) { var arr = JSON.parse(response); for(var i = 0; i < arr.length; i++) { listview.model.append( {listdata: arr[i].Name +" "+ arr[i].City +" "+ arr[i].Country }) } Button { anchors.bottom: parent.bottom width: parent.width text: "Get Data" onClicked: getData()