[jQuery] JSON APIs와 Ajax를 이용해 데이터 가져오기

JSON APIs와 Ajax를 이용해 데이터 로딩 및 완료 된 데이터를 처리해 HTML 화면에 출력하는 예제

들어가며

  만약 날씨 정보와 같이 수시로 변하는 데이터를 HTML을 통해 화면에 출력을 해주고 싶다면 어떻게 해야할까요? 이처럼 고정값이 아닌, 항상 변하는 값을 HTML을 통해 출력해야 하기 때문에 로컬 파일이나, 클라우드에 있는 파일에서 값을 가져와 HTML페이지에 출력을 해줘야 합니다. 그렇다면 데이터를 어떻게 어디서 어떤 형태로 가져오는지 알아보겠습니다.

  APIs(Application Programming Interfaces)는 애플리케이션 사이에 소통하는 인터페이스를 말합니다. 우리가 흔히 말하는 Google APIs도 같은 애플리케이션 간에 소통하는 인터페이스를 제공합니다. 우리가 특정 URL로 데이터를 요청하고, 응답을 받습니다. 대부분의 Web APIs는 데이터를 요청/응답을 할때 JSON(JavaScript Object Notation)의 포맷을 사용해 통신을 합니다. 이번 포스팅에서는 javascript에서 데이터를 불러올 때 사용하는 기술인 Ajax를 이용해 로딩하고자 하는 JSON 포맷의 데이터를 로딩한 후에 HTML의 페이지에 보여주는 방법에 대해서 설명하겠습니다.

화면 구성

  화면을 구성하기 위해 index.html 파일을 작성했습니다. 화면 구성에 대해서 설명을 간단하게 드리면 Get Message라는 버튼을 만들고, 그 위에는 "The message will go here"이 있습니다. Get Message 버튼을 클릭하면 데이터를 불러오고, "The message will go here"의 공간에 HTML값을 변경하는 예제입니다. 

index.html

<div class="container-fluid">
  <div class="row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class="row text-center">
    <div class="col-xs-12 well message">
      The message will go here
   </div>
  </div>
  <div class="row text-center">
    <div class="col-xs-12">
      <button id="getMessage" class="btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

버튼에 이벤트 정의하기

  버튼을 누르면 이벤트를 발생시키기 위해서는 getMessage의 id를 갖고 있는 Element에 이벤트를 입력해야 합니다. $(document).ready() 함수는 페이지 소스가 모두 로딩이 완료가 되면, 최초 한번만 호출되는 함수입니다. 이 함수에서는 버튼을 만들고 클릭 이벤트를 넣는 등의 초기화 하는 작업을 하면 됩니다. 아이디가 getMessage를 가져오기 위해 #getMessage를 통해 가져오고 .on("click", function()){}을 통해 getMessage 버튼을 클릭했을때 호출되는 callback 함수를 정의합니다. class가 message인 값을 가져와서 "Here is the message"라는 텍스트로 변경해주는 예제입니다. 

 $(document).ready(function() {
    $("#getMessage").on("click", function(){
      $(".message").html("Here is the message");
    });
  });

JSON값 가져오기 및 출력하기

  /json/cats.json의 파일을 읽어와서 .message에 JSON의 값을 출력하는 예제입니다.  

 $(document).ready(function() {
    $("#getMessage").on("click", function(){
      $.getJSON("/json/cats.json", function(json) {
        $(".message").html(JSON.stringify(json));
      });
    });
  });

  이렇게 받은 JSON 데이터를 .forEach()를 통해 데이터 세부 항목에 접근이 가능합니다. 또한 filter를 통해 내가 원하지 않는 값을 제외하고 얻을 수 있습니다.

$(document).ready(function() { 
    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {
        var html = "";
        json = json.filter(function(val) {
          return (val.id !== 1);
        })
        json.forEach(function(val) {          
          html += "<div class = 'cat'>"
          html += "<img src = '" + val.imageLink + "'>"
          html += "</div>"
        });
        $(".message").html(html);
      });
   });
});

[참고] www.freecodecamp.com - JSON APIs and Ajax