使用DOM方法打印JSON（Javascript）

我想使用DOM方法来显示我在.js文件内部创建的JSON对象，并且需要在HTML页面中显示它。这就是我的代码的样子，它不工作。使用DOM方法打印JSON（Javascript）

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

来源

2017-03-07 Programmer

1）您可能意味着'$（'＃显示）'或其他一些** **有效选择。 2）对象没有“长度”属性。试试['for..in'循环]（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...in）。 3）所有的本地存储的东西是完全多余的你的问题 – Phil

我实际上一直只使用$（“显示”）整个时间，它似乎工作。我不断地看到人们说添加“＃”的评论。为什么这样？ $函数只是返回window.document.getElementById（theId） – Programmer

我的歉意，我假设你使用的是jQuery。我不会建议依靠'$'被定义。似乎只有Chrome和Firefox做的东西〜http://stackoverflow.com/questions/22244823/what-is-the-dollar-sign-in-javascript-if-not-jquery – Phil

我不知道到底为什么要保存到，然后从localStorage读取或字符串化，然后重新分析你的对象。上面给出的大部分代码都可以使用如.textContent和Array#forEach这样的构造大幅删除或缩小。

但是，您的潜在问题是您无法使用for-loop和index来遍历常规对象。你必须使用像内置的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>

来源

2017-03-07 03:31:43 gyre

Ohhhh好的好吧是的，我从w2schools.com得到的存储的东西。现在，我意识到并找到其他链接时，存储不是必需的。我会尝试用你的答案重新排列我的代码，看看它是否工作！谢谢！ – Programmer

使用DOM方法打印JSON（Javascript）

回答

相关问题