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