JSON 파일 비동기 통신

이전에 XML 파일로 비동기 통신 실습을 해서인지 json은 훨씬 더 간편해보이고 사용하기 더 좋았다.

아래의 코드에서 json 파일의 구조를 보면 JavaScript과 구조가 비슷하고 또한 js코드를 보면 이전에 tamplate() 헬퍼 함수 사용를 사용해서 DOM으로 HTML 구조를 짰을 때와 비슷하다는 것을 알 수있다. json은 JavaScript의 객체 표현식이기 때문이다.

js

(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)

HTML

ediya-menu.json

template desc

JSON과 XML

아래 사진은 비동기 통신으로 json 파일을 불러온 것이다. XML과 비교했을 때 구조가 훨씬 간소하다. 그리고 구조를 보면 JavaScript과 구조가 비슷한데 이는 json은 JavaScript의 객체 표현식이기 때문이다.

html 파일을 불러온 것과 비슷한 것을 확인 할 수 있다.