for ... forループwith jQuery append

Question

私はまだループを学んでいないので少し混乱しています。オブジェクトのjsonファイルをループするfor...inループがあります。次に、jQueryに各オブジェクトのHTML要素を作成させます。私は1つの問題しかし、それがループするたびに、それが出力になるので、新しいものと一緒に、前のオブジェクトを繰り返しています

-name 

-name 
-test 

-name 
-test 
-someone 

-name 
-test 
-someone 
-something 

しかし、私は、私はどのように

-name 

-test 

-someone 

-something 

を行うことができしようとしていますこれを達成するには？そのため

私の現在のコードはこれです：あなたは、各反復でHTML文字列を追加している

var html = "" 
for (var name in urls) { 
    html += `<div class='card-panel white'><div class='container'><div class='row'><div class='input-field col s12'> ${name} <br> ${urls[name].url} </div></div></div></div>` 
    $("#main").append(html) 
} 

Answer 1

代わりに、forループの外に全体のコードを追加します。ただし、own properties and not its prototypesを取得するためにObject#hasOwnPropertyを使用しています。

var html = "" 
for (var name in urls) { 
    if(urls.hasOwnProperty(name)) 
    html += `<div class='card-panel white'><div class='container'><div class='row'><div class='input-field col s12'> ${name} <br> ${urls[name].url} </div></div></div></div>`; 
} 
$("#main").append(html) 

---

私はObject.keys()とString#mapの方法を使用する方が良いと思います。

$("#main").append(
    Object.keys(urls).map(function(name){ 
    return `<div class='card-panel white'><div class='container'><div class='row'><div class='input-field col s12'> ${name} <br> ${urls[name].url} </div></div></div></div>`;  
    }) 
)