將JavaScript對象列表顯示爲HTML列表項

當我嘗試這樣做時，HMTL頁面只顯示最後一個對象，而不是所有對象。將JavaScript對象列表顯示爲HTML列表項

這裏是我的JavaScript文件

var family = { 
    aaron: { 
    name: 'Aaron', 
    age: 30 
    }, 
    megan: { 
    name: 'Megan', 
    age: 40 
    }, 
    aaliyah: { 
    name: 'Aaliyah', 
    age: 2 
    } 
} 

var list = function(family) { 
    for (var prop in family) { 
    var elList = document.getElementById('aaron-family').innerHTML = prop; 
    } 
} 

list(family);

這是我的HTML文件

<html> 
<head> 
    <title>Aaron's Test With Objects</title> 
</head> 
    <li id="aaron-family">Hey, this is where it goes</li> 
<footer> 
    <script src="objects.js"></script> 
</footer> 
</html>

來源

2016-01-31 Aaron Kantrowitz

您需要將新項目追加到列表中。 –

嗯，你已經得到了幾個問題有（<li>標籤沒有父母<ol>或<ul>標籤中其他人）......但我想說的主要錯誤是，你將每個後續輸出替換爲innerHTML。

解決方案：分配一個已編譯的陣列innerHTML（使用join以包括值之間的空間）

var list = function(family) { 
    var names = []; 
    for (var prop in family) { 
    names.push(prop.name); 
    } 
    document.getElementById('aaron-family').innerHTML = names.join(' '); 
} 
list(family);

來源

2016-01-31 00:14:13 sfletche

刪除

elList因爲在具有它沒有點...

然後改變

document.getElementById('aaron-family').innerHTML = prop;

去

document.getElementById('aaron-family').innerHTML += prop;

這樣，你不是經常將innherHTML設置爲prop。另外，爲了防止不斷獲取元素，您可能會發現將函數更改爲以下內容會更好。

function list(family) { 
    var elList = document.getElementById('aaron-family'); 
    for (var prop in family) { 
    elList.innerHTML += prop; 
    } 
}

希望這有助於:)

來源

2016-01-31 00:18:09 tkellehe

謝謝你們！這是我想出了一個最終的解決方案：

var family = { 
    aaron: { 
    name: 'Aaron', 
    age: 30 
    }, 
    megan: { 
    name: 'Megan', 
    age: 40 
    }, 
    aaliyah: { 
    name: 'Aaliyah', 
    age: 2 
    } 
} 

var list = function(family) { 
    for (var prop in family) { 
    document.getElementById('aaron-family').innerHTML += '<li>' + prop + '</li>'; 
    console.log(prop); 
    } 
}

HTML

<html> 
<head> 
    <title>Aaron's Test With Objects</title> 
</head> 
<ul id="aaron-family"> 
</ul> 
<footer> 
    <script src="objects.js"></script> 
</footer> 
</html>

我敢肯定，它可以進行重構，但它的工作原理，在視覺上。

來源

2016-01-31 00:29:55

您可能希望將'document.getElementById'移到for循環之外，因爲每個循環都在爲該id做一個查詢:) – tkellehe

將JavaScript對象列表顯示爲HTML列表項

回答

相關問題