javascript - 如何使用 jquery 从 json 数组中提取数据并将其附加到 html 表中？

Question

我想从 Json 数组中提取数据并使用 jquery 将其附加到 html 表中喜欢

• 懒惰 5
• dosa 20

这就是我的浏览器控制台打印服务器返回内容的方式

    {hotelMitem: Array(5)}
    hotelMitem: Array(5)
    0: {hname: "idly", iprice: "5"}
    1: {hname: "dosa", iprice: "20"}
    2: {hname: "dosa", iprice: "20"}
    3: {hname: "dosa", iprice: "20"}
    4: {hname: "dosa", iprice: "20"}
    length: 5
    __proto__: Array(0)
    __proto__: Object

But when i try to iterate & print with jQuery

    var _jsonString = "";
                for(var key in data){
                    _jsonString +="key "+key+" value "+data[key]+ '</br>';
                }
    $("#datatable").append(_jsonString)

HTML 输出我得到的内容

key hotelMitem value [object Object],[object Object],[object Object],[object Object],[object Object]

Answer 1

您需要遍历 data.hotelMitem，而不是 data 本身。由于 key 是静态的，您可以直接访问它们而无需额外的内部循环。然后，您需要构建实际的 HTML 以使用 tr 和 td 元素填充表格。您可以使用 map() 实现这一点，如下所示:

var data = {
  hotelMitem: [{
    hname: "idly",
    iprice: "5"
  }, {
    hname: "dosa",
    iprice: "20"
  }, {
    hname: "dosa",
    iprice: "20"
  }
  // more items...
  ]
};

var html = data.hotelMitem.map(function(obj) {
  return `<tr><td>${obj.hname}</td><td>${obj.iprice}</td></tr>`;
});
$("#datatable").append(html)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="datatable"></table>