使用香草JavaScript在表格中顯示帶有圖像的嵌套json

Question

我想使用香草javascript在HTML表中呈現其中包含圖像的嵌套JSON，我嘗試了一些嘗試，但無法在HTML表中獲取。 這是我的代碼Codepen的鏈接

預期產量：

HTML代碼：

    <table id="product">
        <th>Products</th>
        <tbody></tbody>
    </table>

JS代碼：

var product_catalog = "https://gist.githubusercontent.com/prate3k/f03c7d20e235e2cd81b1bf608858da55/raw/8b6bcf994e4112d4261644eb7dca29fec532e4e1/sample-product-response.json";

    var output = document.querySelector("#product tbody");

    function build(JSONObject) {
        /**get all keys***/
        var keys = Object.keys(JSONObject);
        /**get all subkeys***/

        var subkeys = Object.keys(JSONObject[keys]);
        console.log(subkeys);
        /**loop sub keys to build HTML***/
        for (var i = 0, tr, td; i < subkeys.length; i++) {
            tr = document.createElement("tr");
            td = document.createElement("td");
            td.appendChild(document.createTextNode(subkeys[i]));
            tr.appendChild(td);
            output.appendChild(tr);
        }
    }

    build(product_catalog);

Answer 1

您不是從對象而是從JSON字符串獲取鍵。 在獲取其密鑰之前，請使用JSON.parse。

function build(JSONObject) {

        JSONObject = JSON.parse(JSONObject);
        /**get all keys***/
        var keys = Object.keys(JSONObject);
        /**get all subkeys***/

        var subkeys = Object.keys(JSONObject[keys]);
        console.log(subkeys);
        /**loop sub keys to build HTML***/
        for (var i = 0, tr, td; i < subkeys.length; i++) {
            tr = document.createElement("tr");
            td = document.createElement("td");
            td.appendChild(document.createTextNode(subkeys[i]));
            tr.appendChild(td);
            output.appendChild(tr);
        }
    } 

希望這可以幫助。