如何使用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>