將json轉換爲jQuery數據表中的ajax？

Question

現在JSON數據已存儲在ajax中的變量「msg」中。我只能在頁面中提醒（msg）。但我想把它放入數據表或以任何合適的方式查看ajax或js中的列的數據。

這裏是JSON類型：

{ "aaData": [ { "ID": "1", "FESTIVAL": "Antipodes Festival", "SUBURB": "Lonsdale Street, Melbourne", "POSTCODE": "3000", "WEBSITE": "http://www.antipodesfestival.com.au/", "DESCRIPTION": "The greek precinct in melbourne cbd will transform into a huge, free street festival with the hosting of the antipodes lonsdale street festival which will hold sway from 14 february 2015 to 15 february 2015." }, { "ID": "5", "FESTIVAL": "Boite Singers Festival", "SUBURB": "Victoria", "POSTCODE": "3000", "WEBSITE": "http://boite.com.au/index.php", "DESCRIPTION": "The boite singers festival brings you four days of vocal inspiration and sheer fun on the second weekend of january each year." } ] } 

Answer 1

我不明白你的問題，但我想你想作爲一個表來顯示你的JSON值！

$(document).ready(function(){ 
 
var myjson = { "aaData": [ { "ID": "1", "FESTIVAL": "Antipodes Festival", "SUBURB": "Lonsdale Street, Melbourne", "POSTCODE": "3000", "WEBSITE": "http://www.antipodesfestival.com.au/", "DESCRIPTION": "The greek precinct in melbourne cbd will transform into a huge, free street festival with the hosting of the antipodes lonsdale street festival which will hold sway from 14 february 2015 to 15 february 2015." }, { "ID": "5", "FESTIVAL": "Boite Singers Festival", "SUBURB": "Victoria", "POSTCODE": "3000", "WEBSITE": "http://boite.com.au/index.php", "DESCRIPTION": "The boite singers festival brings you four days of vocal inspiration and sheer fun on the second weekend of january each year." } ] } ; 
 
console.log(myjson); 
 
for(i=0;i < myjson.aaData.length;i++){ 
 
    var html=''; 
 
    $.each(myjson.aaData[i], function(ind,val){ 
 
     html +='<td>'+val+'</td>'; 
 
    }); 
 
    $('#table_id tbody').append('<tr>'+html+'</tr>'); 
 
} 
 
    $('#table_id').DataTable(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.css" rel="stylesheet"/> 
 
<script src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script> 
 
<table id="table_id" class="display"> 
 
    <thead> 
 
     <tr> 
 
      <th>ID</th> 
 
      <th>FESTIVAL</th> 
 
      <th>SUBURB</th> 
 
      <th>POSTCODE</th> 
 
      <th>WEBSITE</th> 
 
      <th>DESCRIPTION</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody>   
 
    </tbody> 
 
</table>

我希望這將幫助你:)

Answer 2

這是這樣

//html 
<table id="example" class="display" width="100%"> 
</table> 

//jquery 
$('#example').DataTable({ 
    "aaData": data, 
    "aoColumns": [ 
     { "mDataProp": "name" }, 
     { "mDataProp": "position" }, 
     { "mDataProp": "office" }, 
     { "mDataProp": "extn" }, 
     { "mDataProp": "start_date" }, 
     { "mDataProp": "salary" } 
    ] 
}); 
//data source 

var data= [ 
{ 
    "name": "Tiger Nixon", 
    "position": "System Architect", 
    "salary": "$320,800", 
    "start_date": "2011/04/25", 
    "office": "Edinburgh", 
    "extn": "5421" 
}, 
{ 
    "name": "Garrett Winters", 
    "position": "Accountant", 
    "salary": "$170,750", 
    "start_date": "2011/07/25", 
    "office": "Tokyo", 
    "extn": "8422" 
} 
] 

你應該參考this計算器問題後。和this小提琴