$.getJson 으로 외부 JSON DATA 가져오기

Posted on Edited on In , Word count in article: 208 Reading time ≈ 1 mins.

정적 사이트를 만들어서 사용하다보니 데이터 담당을 json file 이 하고 있다.
주가 데이터 라던지 이미지 URL 정보 데이터 들을 json file 로 만들어서
사용하고 있는데 사이트에 올려있는 json file 을 사용해서
data 처리를 하는 것을 포스트로 남겨두려고 한다

getJSON

jQuery 에서 getJSON() 으로 json 파일을 읽어올 수 있다

jQuery.getJSON( url [, data ] [, success ] )

url
Type: String
A string containing the URL to which the request is sent.

data
Type: PlainObject or String
A plain object or string that is sent to the server with the request.

success
Type: Function( PlainObject data, String textStatus, jqXHR jqXHR )
A callback function that is executed if the request succeeds.

사용예제

sucess 위치에 callback 함수를 넣어서 data 를 받아서 처리하는 방식으로 사용한다.

1
2
3
4
5
6
7
8
9
10
11
$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

실제적용예제

배너생성기에서는 unsplash 이미지 URL 을 json 으로 저장해 놓고 getJSON 으로 읽어와서 사용했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const randomizePicture = () => {
  const bannerwd = document.getElementById("bannerwd").value;
  const bannerhg = document.getElementById("bannerhg").value;

  $.getJSON("unsplash.json", function (json) {
    const randomNum = Math.floor(Math.random() * json.length);
    document.getElementById("banner-url").value =
      json[randomNum].url +
      "?auto=format&fit=crop&w=" +
      bannerwd * 1.5 +
      "&h=" +
      bannerhg * 1.5 +
      "&q=90";
    getURLImage();
  });
};