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

Question

我想从Json数组中提取数据，并用jquery将它附加到html表中

• 闲置5
• 多萨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

但是当我尝试使用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本身。 由于键是静态的，因此您可以直接访问它们而无需其他内部循环。 然后，您需要构建实际的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>