javascript를 사용하여 jsondata.json 파일에서 html 테이블 채우기

Question

javascript 및 jQuery를 처음 사용합니다. JsonData.json 파일을로드했습니다. 사용자가 단추를 클릭 할 때 모든 데이터를 반복하고 HTML 테이블에 표시하는 데 도움이 필요합니다.

<script> 
    var a = {}; 
    $.getJSON('JsonData.json', function (data) { 
     a = data; 
    }); 
</script> 

내 테이블 구조는 다음과 같습니다 :

는

<table> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>IDNumber</th> 
    </tr> 
</table> 

내 "JsonData.json"파일 구조가 은 다음과 같습니다 :

[ 
    { 
     "ID": 1, 
     "Name": "John Smith", 
     "IDNumber": "7606015012088" 
    }, 
    { 
     "ID": 2, 
     "Name": "Molly Malone", 
     "IDNumber": "8606125033087" 
    }, 
    { 
     "ID": 3, 
     "Name": "Rianna Chetty", 
     "IDNumber": "6207145122087" 
    }, 
    { 
     "ID": 4, 
     "Name": "Gregory Nazul", 
     "IDNumber": "8112125042088" 
    }, 
    { 
     "ID": 5, 
     "Name": "Mary Billat", 
     "IDNumber": "9103317012087" 
    }, 
    { 
     "ID": 6, 
     "Name": "Harry Popadopalous", 
     "IDNumber": "7206085031088" 
    }, 
    { 
     "ID": 7, 
     "Name": "Jim Beam", 
     "IDNumber": "51" 
    } 
] 

Answer 1

당신이 사용할 수있는 무엇인가 :

 <script> 
      var a = {}; 
      $.getJSON('JsonData.json', function (data) { 
       a = data; 

    $.each(a, function(idx, elem){ 
    $('table#tbl TBODY').append('<tr><td>'+elem.ID+'</td><td>'+elem.Name +'</td><td>'+elem.IDNumber +'</td></tr>'); 
    }); 
       }); 

     </script> 

<table id="tbl"> 
<thead><tr><th>ID</th><th>Name</th><th>IDNumber</th></tr></thead> 
<tbody></tbody> 
</table>