オブジェクトをループしてプロパティをhtmlファイルに追加する

Question

こんにちは、私はJavaScriptを初めて使っています。私はオブジェクトのプロパティをループし、各プロパティをDOMに追加するのに苦労しています。誰か助けてくださいいくつかの指示を与えることができます私は他の質問を通してこれをつなぎとめようとしましたが、どこが間違っているのか分かりませんでしたか？

var person = { 
    firstName: "john", 
    lastName: "doe", 
    age: 45, 
    placeOfBirth: "somewhere" 
} 

for(var i = 0; i < person.length; i++) { 
    if(hasOwnProperty(person[i])) { 
     var p = document.createElement("p"); 
     p.innerHTML = person[i]; 
     document.body.appendChild(p) 
    } 
} 

Answer 1

person.hasOwnProperty(key)キーはプロパティのみのため、必要ありません。 ですので、ifの条件を使用すると常に真となります。

var person = { 
 
    firstName: "john", 
 
    lastName: "doe", 
 
    age: 45, 
 
    placeOfBirth: "somewhere" 
 
} 
 

 
for(var key in person) { 
 
    
 
     var p = document.createElement("p"); 
 
     p.innerHTML = person[key]; 
 
     document.body.appendChild(p) 
 
    
 
}

Answer 2

あなたは配列としてpersonを扱っています。オブジェクトには長さがありません。オブジェクトのプロパティ

てみ反復するfor inを使用します。

var person = { 
    firstName: "john", 
    lastName: "doe", 
    age: 45, 
    placeOfBirth: "somewhere" 
} 

for(key in person) { 
    if(person.hasOwnProperty(key)) { 
     var p = document.createElement("p"); 
     p.innerHTML = person[key]; 
     document.body.appendChild(p) 
    } 
} 

はまた、あなたが探しているものをhasOwnProperty()

DEMO

Answer 3

の修正の使用を注意することは次のとおりです。

for(var i in person){ 
    if(person.hasOwnProperty(i)){ 
     var p = document.createElement("p"); 
     p.innerHTML = person[i]; 
     document.body.appendChild(p); 
    } 
} 

ただし、i in personはオブジェクト内のすべてのものを参照するため、常にそのプロパティを持つのでif(person.hasOwnProperty(i))を完全に削除できます。

キー名を使用することも考えられます。これは値を追加するだけで、それに関連付けられたキーは何もしません。

p.innerHTML = i + ': ' + person[i]; 

これは生成する必要があります。各段落要素のための "キー：値" の出力を加算し

してみてください。