# JSON 파일 비동기 통신
이전에 XML 파일로 비동기 통신 실습을 해서인지 json은 훨씬 더 간편해보이고 사용하기 더 좋았다.
아래의 코드에서 json 파일의 구조를 보면 JavaScript과 구조가 비슷하고 \
또한 js코드를 보면 이전에 [tamplate() 헬퍼 함수 사용를 사용해서 DOM으로 HTML 구조를 짰을 때](https://shhn0509.gitbook.io/dom/dom/dom-practice/part-3/using-template-function)와 비슷하다는 것을 알 수있다. json은 JavaScript의 객체 표현식이기 때문이다.
{% tabs %}
{% tab title="js" %}
```javascript
(function (global, $, ajax) {
'use strict'
var $menu = $('.ediya-menu')
ajax.get('/data/ediya-menu.json').then(function (data) {
var templ = $.template(data, function (item) {
// JSON -> 데이터 값 추출
var figure = item.figure
var detail = item.detail
var name = figure.name
var width = figure.width
var height = figure.height
var ko = detail.ko
var en = detail.en
var desc = detail.desc
var display = detail.display_criteria
var template = '\
'
return template
})
$menu.html(templ)
})
})(window, Dom, ajax)
```
{% endtab %}
{% tab title="HTML" %}
```markup
```
{% endtab %}
{% tab title="ediya-menu.json" %}
```javascript
[
{
"figure": {
"name": "ICED-벚꽃라떼",
"width": 323,
"height": 323
},
"detail": {
"ko": "ICED 벚꽃라떼",
"en": "Cherry Blossom Latte",
"desc": "은은한 벚꽃향과 라즈베리 화이트 초콜릿 토핑이 올라간 핑크빛 라떼",
"display_criteria": [
["칼로리" , "393kcal"],
["당류", "35g"],
["단백질", "7g"],
["포화지방", "18.6g"],
["나트륨", "149mg"],
["카페인", "0mg"]
]
}
},
{
"figure": {
"name": "HOT-벚꽃라떼",
"width": 323,
"height": 323
},
"detail": {
"ko": "HOT 벚꽃라떼",
"en": "Cherry Blossom Latte",
"desc": "은은한 벚꽃향과 라즈베리 화이트 초콜릿 토핑이 올라간 핑크빛 라떼",
"display_criteria": [
["칼로리" , "430kcal"],
["당류", "38g"],
["단백질", "10g"],
["포화지방", "19.0g"],
["나트륨", "149mg"],
["카페인", "0mg"]
]
}
},
{
"figure": {
"name": "ICED-브라우니-쇼콜라",
"width": 323,
"height": 323
},
"detail": {
"ko": "ICED 브라우니 쇼콜라",
"en": "Brownie Chocolate",
"desc": "깊고 진한 초콜릿의 맛에 부드러운 휘핑크림과 브라우니를 함께 어울러져 고급스러운 디저트 같은 초콜릿 음료",
"display_criteria": [
["칼로리" , "503kcal"],
["당류", "42g"],
["단백질", "9g"],
["포화지방", "20.8g"],
["나트륨", "262mg"],
["카페인", "12mg"]
]
}
},
{
"figure": {
"name": "HOT-브라우니-쇼콜라",
"width": 323,
"height": 323
},
"detail": {
"ko": "HOT 브라우니 쇼콜라",
"en": "Brownie Chocolate",
"desc": "깊고 진한 초콜릿의 맛에 부드러운 휘핑크림과 브라우니를 함께 어울러져 고급스러운 디저트 같은 초콜릿 음료",
"display_criteria": [
["칼로리" , "503kcal"],
["당류", "42g"],
["단백질", "9g"],
["포화지방", "20.9g"],
["나트륨", "299mg"],
["카페인", "12mg"]
]
}
},
{
"figure": {
"name": "제주청귤-오리지널",
"width": 323,
"height": 323
},
"detail": {
"ko": "제주청귤 오리지널",
"en": "Jeju Green Tangerine Tea",
"desc": "청정 제주지역에서 자라난 귀한 청귤의 풍부한 과육을 맛볼 수 있는 새콤달콤한 홈메이드 스타일 과일차",
"display_criteria": [
["칼로리" , "218kcal"],
["당류", "51g"],
["단백질", "0g"],
["포화지방", "0.1g"],
["나트륨", "4mg"],
["카페인", "0mg"]
]
}
},
{
"figure": {
"name": "제주청귤-블라썸",
"width": 323,
"height": 323
},
"detail": {
"ko": "제주청귤 블라썸",
"en": "Jeju Green Tangerine Tea",
"desc": "청귤의 새콤함이 복숭아, 포도 등의 다양한 과일향과 함께 어우러져 밸런스가 훌륭한 블렌딩티",
"display_criteria": [
["칼로리" , "202kcal"],
["당류", "46g"],
["단백질", "1g"],
["포화지방", "0.1g"],
["나트륨", "5mg"],
["카페인", "0mg"]
]
}
},
{
"figure": {
"name": "석류-오리지널",
"width": 323,
"height": 323
},
"detail": {
"ko": "석류 오리지널",
"en": "Pomegranate Tea",
"desc": "석류 특유의 산뜻한 향과 깔끔한 뒷맛이 느껴지며, 과육이 한알 한알 살아있는 붉은 빛의 매력적인 과일차",
"display_criteria": [
["칼로리" , "210kcal"],
["당류", "42g"],
["단백질", "0g"],
["포화지방", "0.1g"],
["나트륨", "5mg"],
["카페인", "0mg"]
]
}
},
{
"figure": {
"name": "석류-애플라임",
"width": 323,
"height": 323
},
"detail": {
"ko": "석류 애플라임",
"en": "Pomegranate Apple Lime",
"desc": "산뜻한 석류에 다양한 과일과 꽃, 그리고 샴페인의 향이 더해져 보다 깊고 중후한 맛이 느껴지는 블렌딩티",
"display_criteria": [
["칼로리" , "220kcal"],
["당류", "42g"],
["단백질", "1g"],
["포화지방", "0.1g"],
["나트륨", "7mg"],
["카페인", "0mg"]
]
}
}
]
```
{% endtab %}
{% tab title="template desc" %}
```javascript
var template = '\
';
```
{% endtab %}
{% endtabs %}
## JSON과 XML
아래 사진은 비동기 통신으로 json 파일을 불러온 것이다. XML과 비교했을 때 구조가 훨씬 간소하다. 그리고 구조를 보면 JavaScript과 구조가 비슷한데 이는 json은 JavaScript의 객체 표현식이기 때문이다.
\