使用香草javascript

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);
        }
    } 

希望这会有所帮助。