更新：我應該以更好的方式問。我的錯。但我很難找到一種在表格中顯示它的方法。我確實為此使用了 reduce() 方法，我通過查看控制臺日志得到了結果
我實際上被困在某事上。正如上面的標題告訴你的。我需要有關如何獲得結果的幫助。
下面是代碼
let arr = [{
reference: "A2",
sendTo: "USA",
item: "sticker",
sku: 0921380,
quantity: 1
},
{
reference: "A2",
sendTo: "USA",
item: "toy",
sku: 0921381,
quantity: 2
}, {
reference: "A2",
item: "pencil",
sku: 0921382,
quantity: 2
},
{
reference: "A3",
item: "sticker",
sendTo: "USA",
sku: 0921380,
quantity: 2
}]
console.log(Array)
我在這個問題上使用的 Javascript（這里也感謝這里的人）：
let newArr = arr.reduce((acc, curr) => {
if(acc.some(obj => obj.reference === curr.reference)) {
acc.forEach(obj => {
if(obj.reference === curr.reference) {
obj.sku = obj.sku ", " curr.sku
obj.quantity = obj.quantity ", " curr.quantity
}
});
} else {
acc.push(curr)
}
return acc
}, [])
合并后的結果：
reference: A2
sendTo: USA
item: sticker, toy, pencil
sku: 0921380, 0921381, 0921382
quantity: 1, 2 ,2
reference: A3
item: sticker
sendTo: USA
sku: 0921380
quantity: 2
但是，我需要讓它出現在 HTML 表中，如下所示：
| reference | sendTo | item | sku | quantity |
|----------------------------------------------------|
| A2 USA sticker 0921380 1 |
| toy 0921381 2 |
| pencil 0921382 2 |
|----------------------------------------------------|
| A3 USA sticker 0921380 2 |
|----------------------------------------------------|
uj5u.com熱心網友回復：
為此使用 a reduce()。
let arr = [{
reference: "A0002",
sendTo: "USA",
item: "sticker",
sku: 0921380,
quantity: 1
},
{
reference: "A0002",
sendTo: "USA",
item: "toy",
sku: 0921381,
quantity: 2
}, {
reference: "A0002",
item: "pencil",
sku: 0921382,
quantity: 2
},
{
reference: "A0003",
item: "sticker",
sendTo: "USA",
sku: 0921380,
quantity: 2
}];
let result = arr.reduce((previousValue, currentValue) => {
if (exists = previousValue.find(i => i.reference === currentValue.reference)) {
exists.item = ', ' currentValue.item;
exists.sku = ', ' currentValue.sku;
exists.quantity = ', ' currentValue.quantity;
} else {
previousValue.push(currentValue);
}
return previousValue;
}, []);
console.log(result);uj5u.com熱心網友回復：
假設元素已經排序：
const data = [{
reference: "A0002",
sendTo: "USA",
item: "sticker",
sku: 0921380,
quantity: 1
},
{
reference: "A0002",
sendTo: "USA",
item: "toy",
sku: 0921381,
quantity: 2
}, {
reference: "A0002",
item: "pencil",
sku: 0921382,
quantity: 2
},
{
reference: "A0003",
item: "sticker",
sendTo: "USA",
sku: 0921380,
quantity: 2
}]
const table = document.getElementById('myTable')
let sameCount = 0
for (let i = 0; i < data.length; i ) {
const row = table.insertRow()
let cell
if (sameCount == 0) {
for (let j = i 1; j < data.length && data[j].reference == data[i].reference; j )
sameCount
cell = row.insertCell()
cell.innerHTML = data[i].reference
cell.setAttribute('rowspan', sameCount 1)
cell = row.insertCell()
cell.innerHTML = data[i].sendTo
cell.setAttribute('rowspan', sameCount 1)
} else {
sameCount--
}
cell = row.insertCell()
cell.innerHTML = data[i].item
cell = row.insertCell()
cell.innerHTML = data[i].sku
cell = row.insertCell()
cell.innerHTML = data[i].quantity
}table, th, td {
border: 1px solid;
}<table id="myTable">
<tr>
<th>reference</th>
<th>sendTo</th>
<th>item</th>
<th>sku</th>
<th>quantity</th>
<tr>
</table>uj5u.com熱心網友回復：
大綱
您實際上不需要聚合來創建輸出。相反，按分組屬性 ( reference, sendTo) 對資料陣列進行排序并遍歷結果，在其（元組）值不變的情況下抑制組列的輸出。
執行
<html>
<head>
<title>SO _: Pivot table gen</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td, th {
padding: 0.5em;
border-left: solid 1px black;
border-right: solid 1px black;
}
td.newGroup, th {
border-top: solid 1px black;
}
tr:last-of-type > td, tr:last-of-type > th {
border-bottom: solid 1px black;
}
</style>
<script type="text/javascript">
let arr = [{
reference: "A0002",
sendTo: "USA",
item: "sticker",
sku: 0921380,
quantity: 1
},
{
reference: "A0002",
sendTo: "USA",
item: "toy",
sku: 0921381,
quantity: 2
}, {
reference: "A0002",
sendTo: "USA",
item: "pencil",
sku: 0921382,
quantity: 2
},
{
reference: "A0003",
item: "sticker",
sendTo: "USA",
sku: 0921380,
quantity: 2
}];
// in-situ sorting
arr.sort ( (a, b) => {
let n_cmp
;
n_cmp =
(a.reference === b.reference)
? Math.sign(a.sku - b.sku)
: a.reference.localeCompare(b.reference)
;
return n_cmp;
});
let orderedColumns = [
'reference'
, 'sendTo'
, 'item'
, 'sku'
, 'quantity'
];
console.log(JSON.stringify(arr));
</script>
</head>
<body>
<!--
- 'orderedColumns' are the ... well :)
- 'as_lastKeys' is the array of the currently active grouping key
- 'b_sameKey' flags for each record that the grouping key has not changed.
- CSS class 'newGroup' identifies the start of a new group and allows for CSS markup to visualize the grouping.
Note that for convenience the same class is used for non-grouping columns.
- The elements are generated on the fly by scripts.
The alternative is to use the DOM API to add html elements with attributes.
The control flow basically is the same, see maraca's answer for details (https://stackoverflow.com/a/72713958)
-->
<table>
<thead>
<tr>
<script>orderedColumns.forEach ( ps_key => { document.write(`<th>${ps_key}</th>`); } );</script>
</tr>
</thead>
<tbody>
<script>
let as_lastKeys = ['', ''];
arr.forEach ( po_record => {
let b_sameKey = as_lastKeys.every ( (ps_value, pn_idxKey) => { return ps_value === po_record[orderedColumns[pn_idxKey]]; })
;
document.write('<tr>');
orderedColumns.forEach ( (ps_key, pn_idxColumn) => {
if (pn_idxColumn < as_lastKeys.length) { // Key columns (text not repeated in table output)
if (b_sameKey) {
document.write(`<td> </td>`);
} else {
as_lastKeys[pn_idxColumn] = po_record[ps_key];
document.write(`<td >${po_record[ps_key]}</td>`);
}
} else {
document.write(`<td >${po_record[ps_key]}</td>`);
}
});
document.write('</tr>');
});
</script>
</tbody>
</table>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/494419.html
標籤：javascript html jQuery 数组 目的
上一篇：如何獲得類活動的資料屬性