使用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）

回答

相關問題