jQuery $.getJSON 자바스크립트에서 데이터 가져오는 방법

JSON형태의 데이터를 가지고 오기 위해 jQuery의 $.getJSON를 사용하여 데이터를 가져오는 방법에 대해 알아보겠다. 그 전에 필자는 동기식 즉, 요청과 동시에 처리하는 방식으로 하기 위해 $.getJSON을 선택했다. 하지만, 비동기식으로 처리하기 위해서는 $.ajax를 사용하면 된다.

 

$.getJSON 사용법

const URL = "url address";
$.getJSON(URL,function(data){
	const items = data.item.items;
    	console.log(items);
})

json파일이 item안에 items에 데이터가 있다고 할때를 가정해보면 위와 같이 쓸 수 있다. console창에 가보면 json파일의 데이터가 그대로 나타나는 것을 볼 수 있다. 이것을 html에 table형태로 나타내면 이런 식으로 코딩할 수 있다.

  for (var i = 0; i < items.length; i++) {
    const a = items[i]; //code, name

	
    tableText += "<table>";
    tableText += "<tr>";
    tableText += "<td>";
    tableText += a.code;
    tableText += "</td>";
    tableText += "<td>";
    tableText += a.name;
    tableText += "</td>";
    tableText += "</tr>";
    tableText += "</table>";
  }
  $("#areaCodeValues").append(tableText);