JSON jQuery顯示到表

Question

如何在表中呈現JSON數據。 我嘗試了以下代碼：

HTML ：

<table>
  <thead>
    <tr>
      <th>id</th>

      <th>Name</th>

      <th>Password</th>
    </tr>
  </thead>  
  <tbody id="tbody"></tbody>
</table>

<button id="get">Get</button> 

<script src="script/ajax.googleapis.com_ajax_libs_jquery_1.10.1_jquery.min.js" type="text/javascript"></script> 
<!--<script src="script/myScript.js" type="text/javascript"></script>-->
<script src="script/json_array.js" type="text/javascript"></script>      

腳本jQuery

$(document).ready( function() {
 done();

});


function done() {
      setTimeout( function() { 
      updates(); 
      done();
      }, 200);
}

function updates() {
     $.getJSON("fetch.php", function(data) {
       $.each(data, function (index, item) {
     var eachrow = "<tr>"
                 + "<td>" + item[1] + "</td>"
                 + "<td>" + item[2] + "</td>"
                 + "<td>" + item[3] + "</td>"
                 + "<td>" + item[4] + "</td>"
                 + "</tr>";
     $('#tbody').append(eachrow);
});
 });
}

PHP腳本

<?php
include "./pdoConn.php";
$output = array();
$query = "select * from wishers";
$stmt = $pdo->query($query);
$stmt->execute();
$name = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($name);
?>

json的輸出 ：

    [
      {"id":"1","name":"Tom","password":"098f6bcd4621d373cade4e832627b4f6"},
      {"id":"2","name":"Jerry","password":"098f6bcd4621d373cade4e832627b4f6"},  
      {"id":"3","name":"Kate","password":"098f6bcd4621d373cade4e832627b4f6"},  
      {"id":"4","name":"Joan","password":"098f6bcd4621d373cade4e832627b4f6"},
      {"id":"5","name":"Cyril","password":"098f6bcd4621d373cade4e832627b4f6"},
      {"id":"8","name":"Ama","password":"ama"},      
      {"id":"7","name":"Akusika","password":"mummy"},
      {"id":"9","name":"Abetiafa","password":"joko"}
    ]

Answer 1

當使用表和AJAX時，我建議使用jQuery Datatables插件。 它為您完成了很多工作，如果您使用的是Laravel之類的框架，則有很多軟件包

http://www.datatables.net

Answer 2

不要使用item [1]使用item [id]，這是json，不僅是數組，甚至可以使用item.id。

將json數據視為對象（此處為對象數組），並且此對象具有帶有名稱（而不是數字）的屬性（除非您將其設置為名稱^^）

Answer 3

它應該是

var eachrow = "<tr>"
             + "<td>" + item[index].id + "</td>"
             + "<td>" + item[index].name + "</td>"
             + "<td>" + item[index].password + "</td>"
             + "</tr>";

因為您具有對象數組，所以必須使用index訪問元素，然后才能訪問其屬性。