我的資料結構如下所示：
var data = [
{
A:[
{name: 'Test1', amount: 20},
{name: 'Test2', amount: 30}
],
B:[
{name: 'Test3', amount: 40},
{name: 'Test4', amount: 50}
]
},
{
A:[
{name: 'Test1', amount: 200},
{name: 'Test2', amount: 300}
],
B:[
{name: 'Test3', amount: 400},
{name: 'Test4', amount: 500}
]}
]
這是我想轉置我的結構的方式：
我還在 JSFiddle 中創建了我的陣列結構：https ://jsfiddle.net/rj5e38v9/3/
uj5u.com熱心網友回復：
您可以使用陣列 reduce 并使用鍵A&創建一個物件B。然后你可以迭代這個物件來創建表
var data = [{
A: [{
name: 'Test1',
amount: 20
},
{
name: 'Test2',
amount: 30
}
],
B: [{
name: 'Test3',
amount: 40
},
{
name: 'Test4',
amount: 50
}
]
},
{
A: [{
name: 'Test1',
amount: 200
},
{
name: 'Test2',
amount: 300
}
],
B: [{
name: 'Test3',
amount: 400
},
{
name: 'Test4',
amount: 500
}
]
}
]
const val = data.reduce((acc, curr) => {
for (let keys in curr) {
if (!acc.hasOwnProperty(keys)) {
acc[keys] = [];
}
acc[keys].push(...curr[keys])
}
return acc;
}, {});
let tableStr = ''
for (let keys in val) {
tableStr = `<ul>
<li >${keys}</li>
${val[keys].map(elem=>{return '<li><span>' elem.name '<span >' elem.amount '</span></li>'})}
</ul>`
}
document.getElementById('dataDisplay').innerHTML = tableStrli {
list-style-type: none
}
.valCol {
margin-left: 50px;
color: green;
}
.headerList {
font-style: bold;
font-size: 50px;
}<div id="dataDisplay">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/503666.html
標籤：javascript 数组 目的 转置
上一篇：為什么if陳述句給出了錯誤的值？