javascript - 使用 DOM 方法将 JSON 打印为 HTML (Javascript)

Question

我正在尝试使用 DOM 方法来显示我在 .js 文件中创建的 JSON 对象，并且我需要在 HTML 页面中显示它。这就是我的代码的样子，但它不起作用。

function JSONMethod(){
    carInfo = {"make":"BMW", "model":"M5","mear":"2017","color":"Black"};
    myJSON = JSON.stringify(carInfo);
    localStorage.setItem("theJSON", myJSON);

    text = localStorage.getItem("theJSON");
    obj = JSON.parse(text);

    for(var i = 0; i < obj.length; i++)
    {
        var para = document.createElement("li");
        var node = document.createTextNode(obj[i]);
        para.appendChild(node);
        var element = $("display");
        element.appendChild(para);
    }
}

$函数是这样的

function $(theId){
    return window.document.getElementById(theId);
}

Answer 1

我不确定您到底为什么要保存到 localStorage 然后从中读取，或者字符串化然后重新解析您的对象。您上面给出的大部分代码都可以使用 .textContent 和 Array#forEach 等结构来删除或大幅减小大小。

但是，您的根本问题是您无法使用 for 循环和索引来迭代常规对象。您必须使用内置 Object.keys 之类的函数来获取其所有属性，然后对它们执行某些操作。

function JSONMethod (carInfo) {

  Object.keys(carInfo).forEach(function (k) {
    var li = document.createElement("li")
    li.textContent = k + ': ' + carInfo[k]
    this.appendChild(li)
  }, document.getElementById('display'))

}

JSONMethod({
  "make": "BMW",
  "model": "M5",
  "mear": "2017",
  "color": "Black"
})

<ul id="display"></ul>