for ... in循环与jQuery附加

Question

我还是新学习循环，所以我有点困惑。我有一个循环的对象的json文件的for...in循环。然后我有jQuery为每个对象创建一些html元素。我也确实存在一个问题，每次循环时，都重复先前的对象与新的一个，这样的输出成为沿：

-name 

-name 
-test 

-name 
-test 
-someone 

-name 
-test 
-someone 
-something 

但我试图做

-name 

-test 

-someone 

-something 

我怎样才能做到这一点？

我为它当前的代码是这样的：

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

您在每次迭代追加HTML字符串，而不是追加整个代码之外的for循环。虽然使用Object#hasOwnProperty仅获得own properties and not its prototypes。

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