script 부분
<script>
$(function(){
$.ajax({
url : "data.json",
dataType:"json",
success:function(data){ //json 데이터를 반환 받음
if(data.length>0){//데이터가 있으면
//테이블 태그가 담긴 객체 생성
var tb = $("<table/>");
for(var i in data){//데이터를 하나씩 뽑아냄
//i번째 data 중 key가 id인 것의 value
var $id = data[i].id;
//i번째 data 중 key가 name인 것의 value
var $name = data[i].name;
//<tr>태그 객체 생성
var row = $("<tr/>").append(
//아래의 값을 <tr></tr>안에 삽입
$("<td/>").text($id); //<td>id값</td>
$("<td/>").text($name); //<td>name값</td>
);
//<table></table>안에 <tr></tr>넣기
tb.append(row);
}
//클래스가 wrap인 태그 안에 작성된 table 코드 집어넣기
$(".wrap").append(tb);
}
}
})
})
</script>
출력 (html) 부분
<div class="wrap"></div>
반응형