Hodustory/프로그래밍&DB

[jquery] ajax로 json 파싱하기

호두밥 2020. 2. 11. 14:37

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>
반응형