JSON數組中的HTML表格插入

Question

我想知道如何把JSON轉換成HTML表格
PHP

$query = $conn->query("SELECT `Name`,`Author` FROM `details`;"); 
$array_name = Array(); 
$array_author = Array(); 


while($result = $query->fetch_assoc()){ 
    $array_name[] = $result['Name']; 
    $array_author[] = $result['Author']; 
} 

echo json_encode(array('name'=>$array_name, 'author' =>$array_author)); 

JS

function getbook(){ 
var json; 
$.ajax({ 
    url: "getbook.php", 
    datatype: "json", 
    async:true, 
    success: function(response) { 
     json = JSON.parse(response); 
     console.log(json); 

}, 
    error: function() { 
     console.log("ajax error!"); 
    } 
}); 

我希望結果是像

Name Name Name 
Author Author Author 

與名字和作者在同一<td>如果可能
也可以在生成的每個<td>中插入div嗎？

Answer 1

我會插入name和同一陣列中的author：

$query = $conn->query("SELECT `Name`,`Author` FROM `details`;"); 
$data = array(); 

while($result = $query->fetch_assoc()){ 
    $data[] = [ 
     'name' => $result['Name'], 
     'author' => $result['Author'] 
    ]; 
} 

echo json_encode($data); 

它將建立自己的JSON數組一樣：

[{"name":"Some Name","author":"John Doe"},{"name":"Another Name","author":"Mary Jane"}] 

然後從JS成功的功能：

// create sample json array for demonstration 
 
var data = [{"name":"Some Name","author":"John Doe"},{"name":"Another Name","author":"Mary Jane"}]; 
 

 
// ... 
 

 
$('body').append('<table id="details" class="table"><thead><tr><td>Name</td><td>Author</td></tr></thead><tbody>'); 
 

 
data.forEach(function(details) { 
 
    $('#details').append('<tr><td>'+details.name+'</td><td>'+details.author+'</td></tr>'); 
 
}); 
 

 
$('body').append('</tbody></table>'); 
 

 
// ...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

所以JS個部分將是這樣的：

function getbook(){ 
    var json; 
    $.ajax({ 
     url: "getbook.php", 
     datatype: "json", 
     async:true, 
     success: function(response) { 
      $('body').append('<table id="details"><thead><tr><td>Name</td><td>Author</td></tr></thead><tbody>'); 
      data.forEach(function(details) { 
       $('#details').append('<tr><td>'+details.name+'</td><td>'+details.author+'</td></tr>'); 
      }); 
      $('body').append('</tbody></table>'); 
     }, 
     error: function() { 
      console.log("ajax error!"); 
     } 
    }); 
} 

希望它能幫助。