DOMメソッドを使用したJSONのHTML（JavaScript）への出力

Question

私は自分の.jsファイル内に作成したJSONオブジェクトを表示するためにDOMメソッドを使用しようとしています。 これは私のコードがどのように見えるもので、動作しません。

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

$関数は正確にあなたが保存され、その後、localStorageからの読み取り、または文字列化してから、オブジェクトを再解析、なぜ私はわからないんだけど、この

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

Answer 1

です。上記のコードの大部分は、.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>