如何映射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>";

为（在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>

伟大的工作。谢谢。 – Alma

答

在这一行：

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

采取额外的TR关底，因为你是无论如何开始每个项目一个新行。

答

$(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

如何映射JSON数据在JavaScript表

相关推荐