如何映射JSON數據在JavaScript表

我有顯示此JSON數據：如何映射JSON數據在JavaScript表

[{ 
"metadata": { 
    "sortColumn": "Id", 
    "sortOrder": "Asc" 
}, 
"data": [{ 
    "id": "1", 
    "name": "Sam", 
    "age": "32" 
}, { 
    "id": "2", 
    "name": "tom", 
    "age": "22" 
}] 
}]

我需要顯示的JavaScript在網格中的數據部分類似於表。我試過這個，但是它只顯示了一個只有第一行的表，我如何進行更改以顯示所有行（意味着我傳遞的任何大小的數據）。

function load() { 
     data = '[{"metadata": {"sortColumn": "Id","sortOrder": "Asc"},"data": [{"id": "1","name": "Sam","age": "32"}, {"id": "2","name": "tom","age": "22"}]}]'; 

     var mydata = JSON.parse(data); 

     $table = "<table id = 'resultTable'><td>Id</td><td>Name</td><td>Age</td><tr>"; 

     for (var i = 0; i < mydata.length; i++) { 

       $table += "<tr>"; 

      var it = mydata[i]; 



      $table += "<td>" + it.data[i].id + "</td>"; 

      $table += "<td>" + it.data[i].name + "</td>"; 

      $table += "<td>" + it.data[i].age + "</td>"; 

      //alert(items[i].duration); 
      $table += "</tr>"; 
     } 



     $table += "</table>"; 

     $('body').append($table); 
     $table = "<table id = 'resultTable'><td>Id</td><td>Name</td><td>Age</td><tr>";

來源

2017-02-17 Alma

爲（在MYDATA鍵[0]。數據）... MYDATA只包含一個對象... –

嘗試foreach循環指的下面的鏈接http://stackoverflow.com/q/9329446/4984906 – 2017-02-17 18:49:57

您想循環使用mydata[0].data這是行數據。

儘管由於在整個數組中只有一個對象，您的結構並沒有真正理解外部數組。

如果卸下外陣列，它只是一個對象，你會遍歷mydata.data

function load() { 
 
    data = '[{"metadata": {"sortColumn": "Id","sortOrder": "Asc"},"data": [{"id": "1","name": "Sam","age": "32"}, {"id": "2","name": "tom","age": "22"}]}]'; 
 

 
    var mydata = JSON.parse(data); 
 

 
    $table = "<table id = 'resultTable'><tr><td>Id</td><td>Name</td><td>Age</td></tr>"; 
 

 
    for (var i = 0; i < mydata[0].data.length; i++) { 
 

 
    $table += "<tr>"; 
 

 
    var it = mydata[0].data[i]; 
 

 
    $table += "<td>" + it.id + "</td>"; 
 
    $table += "<td>" + it.name + "</td>"; 
 
    $table += "<td>" + it.age + "</td>"; 
 
    //alert(items[i].duration); 
 
    $table += "</tr>"; 
 
    } 
 

 
    $table += "</table>"; 
 
    $('body').append($table); 
 
} 
 
load()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

來源

2017-02-17 18:35:49 charlietfl

偉大的工作。謝謝。 – Alma

在這一行：

$table = "<table id = 'resultTable'><td>Id</td><td>Name</td><td>Age</td><tr>";

採取額外的TR關底，因爲你是無論如何開始每個項目一個新行。

來源

2017-02-17 18:34:08 BenShelton

$(document.body).append("<table id = 'resultTable'><tr><td>Id</td><td>Name</td><td>Age</td></tr><tr><td>"+mydata[0].data.map(el=>Object.values(el).join("</td><td>")).join("</td></tr><tr><td>")+"</td></tr></table>");

你的主要錯誤是你想要的數組是MYDATA [0] .data，而不是mydata。香港專業教育學院還shortified你的代碼（注：其ES6）...

http://jsbin.com/tomitifafe/edit?output

來源

2017-02-17 18:38:25

如何映射JSON數據在JavaScript表

回答

相關問題