JSON 파일 비동기 통신
이전에 XML 파일로 비동기 통신 실습을 해서인지 json은 훨씬 더 간편해보이고 사용하기 더 좋았다.
아래의 코드에서 json 파일의 구조를 보면 JavaScript과 구조가 비슷하고 또한 js코드를 보면 이전에 tamplate() 헬퍼 함수 사용를 사용해서 DOM으로 HTML 구조를 짰을 때와 비슷하다는 것을 알 수있다. json은 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 = '\
<li class="ediya-menu__item">\
<a href="#">\
<figure>\
<img src="https://raw.githubusercontent.com/yamoo9/assets/master/images/ediya/'+ name +'.png" alt width="'+ width +'" height="'+ height +'">\
<figcaption>'+ ko +'</figcaption>\
</figure>\
</a>\
<div hidden class="ediya-menu__item--detail">\
<strong class="ediya-menu__item--name">'+ ko +'<span lang="en">'+ en +'</span></strong>\
<p>'+ desc +'</p>\
<div class="ediya-menu__item--multi-column is-2"><p>\
';
template += $.template(display, function (item) {
return '<span>' + item[0] + '<b>(' + item[1] + ')</b></span>'
})
template +=
'</p></div><button type="button" class="button is-close-panel" aria-label="아이템 소개 패널 닫기">×</button></div></li>'
return template
})
$menu.html(templ)
})
})(window, Dom, ajax)JSON과 XML
아래 사진은 비동기 통신으로 json 파일을 불러온 것이다. XML과 비교했을 때 구조가 훨씬 간소하다. 그리고 구조를 보면 JavaScript과 구조가 비슷한데 이는 json은 JavaScript의 객체 표현식이기 때문이다.
Last updated
Was this helpful?