使用 DOM 方法将 JSON 打印到 HTML (Javascript)答案

【问题标题】：Printing JSON using DOM method to HTML (Javascript)使用 DOM 方法将 JSON 打印到 HTML (Javascript)
【发布时间】：2017-07-27 03:27:16
【问题描述】：

我正在尝试使用 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);
}

【问题讨论】：

1) 您可能指的是$('#display) 或其他一些有效选择器。 2) 对象没有length 属性。试试for..in loop。 3）所有本地存储的东西对你的问题来说都是多余的
我实际上一直在使用 $("display") ，它似乎在工作。我一直在 cmets 上看到人们说要添加“#”。为什么这样？ $ 函数只返回 window.document.getElementById(theId)
抱歉，我以为您使用的是 jQuery。我不建议依赖 $ 被定义。似乎只有 Chrome 和 Firefox 才能做到~stackoverflow.com/questions/22244823/…
不用担心，我应该澄清一下 $ 函数是什么。不过谢谢！

标签： javascript html json object dom

【解决方案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"
})

&lt;ul id="display"&gt;&lt;/ul&gt;

【讨论】：

哦，好吧好吧，我从 w2schools.com 得到的存储东西。现在我意识到并找到了其他链接，因此不需要存储。我会尝试用你的答案重新排列我的代码，看看它是否有效！谢谢！