无法基于条件添加<th>对象数组

Question

我有一个对象数组，我想从服务器端将其呈现为一个html5表。我在数组中有两种类型的数据。因此，基于这些值，我想创建tr td，并在每种类型的数据之前添加一个th。这是阵列：

阵列：

const arr = [
{ name: 'monica', type: 'A' },
{ name: 'chandler', type: 'B' },
{ name: 'joey', type: 'B' },
{ name: 'ross', type: 'A' },
{ name: 'phoebe', type: 'A' },
{ name: 'rachel', type: 'B' }
]

预期输出：

[
'<th>Type A</th>',
'<tr><td>monica</td></tr>',
'<tr><td>ross</td></tr>',
'<tr><td>phoebe</td></tr>',
'<th>Type B</th>',
'<tr><td>chandler</td></tr>',
'<tr><td>joey</td></tr>',
'<tr><td>rachel</td></tr>'
]

如果没有类型A或类型B，则预期输出：

[
'<th>Type A</th>',
'<tr><td>No Data for Type A</td></tr>'
'<th>Type B</th>',
'<tr><td>chandler</td></tr>',
'<tr><td>joey</td></tr>',
'<tr><td>rachel</td></tr>'
]
OR
[
'<th>Type A</th>',
'<tr><td>monica</td></tr>',
'<tr><td>ross</td></tr>',
'<tr><td>phoebe</td></tr>',
'<th>Type B</th>',
'<tr><td>No Data for Type B</td></tr>'
]

到目前为止我尝试了什么：

const arr = [
{ name: 'monica', type: 'A' },
{ name: 'chandler', type: 'B' },
{ name: 'joey', type: 'B' },
{ name: 'ross', type: 'A' },
{ name: 'phoebe', type: 'A' },
{ name: 'rachel', type: 'B' }
]
const typeA     = [`
<tr>
<td>Type A</td>
</tr>
`];
const typeB     = [`
<tr>
<td>Type B</td>
</tr>
`];
arr.forEach( item => {
if( item.type === 'A' ) {
typeA.push(`
<tr>
<td>${item.name}</td>
</tr>
`);
}else if( item.type === 'B' ) {
typeB.push(`
<tr>
<td>${item.name}</td>
</tr>
`);
}
});
const allData = [ ...typeA, ...typeB ];
console.log(allData);

Answer 1

const arr = [
{ name: "monica", type: "A" },
{ name: "chandler", type: "B" },
{ name: "joey", type: "B" },
{ name: "ross", type: "A" },
{ name: "phoebe", type: "A" },
{ name: "rachel", type: "B" },
];

// change to th!
const typeA = [
"<th>Type A</th>"
];
// change to th!
const typeB = [
"<th>Type B</th>"
];
if (!(arr.find(item=>item.type=='A'))) { typeA.push('<tr><td>No Data for Type A</td></tr>') }
if (!(arr.find(item=>item.type=='B'))) { typeB.push('<tr><td>No Data for Type B</td></tr>') }
arr.forEach((item) => {
if (item.type === "A") {
typeA.push(`<tr><td>${item.name}</td></tr>`);
} else if (item.type === "B") {
typeB.push(`<tr><td>${item.name}</td></tr>`);
}
});
const allData = [...typeA, ...typeB];
console.log(allData);

Answer 2

在考虑渲染数据之前，应该先准备好数据。

如果您尝试在同一时刻完成所有工作，那么您的代码可能会有缺陷，更难维护。

先将数据格式化为适当的结构，然后使用它。

const arr = [
{ name: 'monica', type: 'A' },
{ name: 'chandler', type: 'B' },
{ name: 'joey', type: 'B' },
{ name: 'ross', type: 'A' },
{ name: 'phoebe', type: 'A' },
{ name: 'rachel', type: 'B' }
];
const types = {
'A': [],
'B': []
};
// Sort each item in the right type array
arr.forEach(item => {
types[item.type].push(item);
});

// rendering time
let template = '';
// define a function to add a row in your template table
let add_row = content => `<tr><td>${content}</td></tr>`;
// loop through the keys of your object
for (let type in types) {
template += `<th>Type ${type}</th>`;
if (types[type].length === 0) {
template += add_row(`No data for type ${type}`);
continue;
}
// loop through the type items
for (let item of types[type]) {
template += add_row(item.name);
}
}
document.querySelector('table').innerHTML = template;

<table></table>

Answer 3

使用；groupBy"；方法，然后迭代分组对象的Object.entries()

const arr = [
{ name: 'monica', type: 'A' },
{ name: 'chandler', type: 'B' },
{ name: 'joey', type: 'B' },
{ name: 'ross', type: 'A' },
{ name: 'phoebe', type: 'A' },
{ name: 'rachel', type: 'B' }
]
const grouped = arr.reduce((a,{type,...rest})=> (a[type].push(rest),a),{A:[],B:[]})
// helper function
const row = (txt, tag) => `<tr><${tag}>Type ${txt}</${tag}}></tr>`;
const res = Object.entries(grouped).reduce((a,[k,v])=>{   
const rows = v.length ? v.map(o => row(o.name, 'td')) : [row('No Entries','td')]
return  [...a, row(`Type ${k}`,'th'), ...rows];  
},[])
console.log(res)