プロパティを持つオブジェクトの配列を反復し、私たちは、プロパティを持つオブジェクトのコレクションを介して実行しようとしているDOM

Question

にそれらを印刷する（キー：値）さんとDOMに書き込みます。

var productContent = { 
item1: { 
    description: "description 1", 
    price: 1, 
    URL: "something1.com", 
}, 
item2: { 
    description: "description 2", 
    price: 2, 
    URL: "something2.com", 
}, 

私たちは、次のようなコードのいくつかの異なる種類の、試してみた：何も動いていないようで

var productInfo; 
var insertProduct = document.getElementById("productList"); 

for (var i in productContent) { 
    console.log(productContent[i]); 
    productInfo += productContent[i]; 
} 

insertProduct.innerHTML = productInfo; 

を。どのようにこれにアプローチする上の任意の考え？私たちはコンソールに表示されたプロパティを取得することができましたが、あまり多くはありませんでした。

Answer 1

1. あなたの最初のコードブロックに構文エラーがあります。 productContentオブジェクトに、中かっこの中かっこがありません：}。
2. また、代わりに専用のプロパティの間の最後のプロパティの後にコンマを持っています。

あなたはこれをデバッグするには、ブラウザの開発ツールでJSコンソールを使用する必要があります。

Answer 2

あなたのスクリプトに多少の誤差を持っている、あなたは次でを開始することができます。

var htmlValue = ''; 

for (var productKey in productContent) { 
    var product = productContent[productKey]; 
    htmlValue += 'description: ' + product.description + '<br>'; 
    htmlValue += 'price: ' + product.price + '<br>'; 
    htmlValue += 'url: ' + product.URL + '<br><br>'; 
} 

insertProduct.innerHTML = htmlValue; 

エラー：

1.

for (var i in productContent) { 

これはただ強いの提案ですが、 keyのように、コンテキストに意味のあるものにiを変更する必要があります。オブジェクトのプロパティ変数の名前を正しく指定すると、コード内のエラーを特定するのに役立ちます。

productInfo += productContent[i] 

これは、オブジェクトの値を連結するための適切な方法ではありません。最初の反復は "undefined [object Object]"になります。

3.

insertProduct.innerHTML = productInfo; 

あなたもここで行うには何をしようとしていますか？オブジェクトに要素を入れることはできません。あなたはコードとして配置し、あなたが望む方法でフォーマットしなければなりません。