我正在嘗試以下列格式列出一個物件，但我不知道如何列舉 li 或將它們放入自己的 ol 中是否有任何幫助？
看起來您的帖子主要是代碼；請添加更多細節。看起來您的帖子主要是代碼；請添加更多細節。
let myObj = [
{
name:"Pablo",
age:"39",
job:"retired",
city:"LA",
},
{
name:"Ernesto",
age:"20",
job:"student",
city:"LA",
},
{
name:"Katrina",
age:"25",
job:"lawyer",
city:"LA",
},
{
name:"Mario",
age:"55",
job:"doctor",
city:"Lancaster",
},
{
name:"Luigi",
age:"50",
job:"Server",
city:"Lancaster",
},
{
name:"Peach",
age:"10",
job:"street",
city:"Labrea",
}
];
let target = document.getElementById('target');
let cityName = null;
for(i=0;i<myObj.length;i ){
if (cityName == null && myObj[i].city){
target.innerHTML = `<h3 >${myObj[i].city}</h3>`;
}
if (cityName && cityName != myObj[i].city){
if (cityName) {
target.innerHTML = `<h3 >${myObj[i].city}</h3>`;
}
target.innerHTML = `<li>${myObj[i].name}</li>`;
} else {
target.innerHTML = `<li>${myObj[i].name}</li>`;
}
cityName = myObj[i].city;
} .cityTitle{
border: 1px solid black;
}
h3{
margin: 0;
padding: 0px 10px;
background-color: rgb(245, 185, 185);
}<div id="target"></div>預期的：
洛杉磯
- 巴勃羅
- 埃內斯托
- 卡特里娜颶風
蘭開斯特
- 馬里奧
- 路易吉
拉布雷亞
- 桃
uj5u.com熱心網友回復：
先獲取不重復的城市，然后回圈渲染。
// get unduplicated cities
const cities = [...new Set(data.map(person => person.city))];
//render html
cities.forEach(city => {
//get persons in city
const persons = data.filter(person => person.city === city);
target.innerHTML = `<h3 >${city}</h3>`;
target.innerHTML = persons.map(p => `<li>${p.name}</li>`).join('');
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/478472.html
標籤：javascript
上一篇：如何將具有陣列資料的物件中的每個鍵轉換為與該鍵資料陣列大小分開的物件
下一篇：div不跟隨滑鼠