我想重組一個 json 物件陣列以表格格式顯示資料。我已經設法使用下面的 lodash 命令創建了一個物件，其名稱為鍵，值作為每種型別的陣列
const grouped = _.groupBy(dayTargetDetails, trgt => trgt.NAME);
我想要以下格式的資料
| 水果 | 10/01 | 10/02 | 10/03 | 10/04 | 10/05 | ... | 到月底 |
|---|---|---|---|---|---|---|---|
| 蘋果 | 45 | 75 | 15 | 64 | 19 | .. | |
| 橙子 | 18 | 26 | .. |
示例 JSON 資料：
const dayTargetDetails = [
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-01",
"ORDERS": 45
},
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-02",
"ORDERS": 75
},
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-03",
"ORDERS": 15
},
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-04",
"ORDERS": 64
},
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-05",
"ORDERS": 19
},
{
"NAME": "ORANGE",
"ORDER_DT": "2022-10-01",
"ORDERS": 18
},
{
"NAME": "ORANGE",
"ORDER_DT": "2022-10-02",
"ORDERS": 26
}
]
uj5u.com熱心網友回復：
用于將reduce()JSON 記錄編譯成相應的NAME類別：
function compileDayTD(dayTargetDetails) {
return dayTargetDetails.reduce(function (prev, itm) {
// check for existing NAME key, instantiate with array if none
(undefined !== prev[itm.NAME] || (prev[itm.NAME] = []))
// append item to NAME array
&& prev[itm.NAME].push(itm);
return prev;
}, {});
}
const dayTargetDetails = [
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-01",
"ORDERS": 45
},
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-02",
"ORDERS": 75
},
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-03",
"ORDERS": 15
},
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-04",
"ORDERS": 64
},
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-05",
"ORDERS": 19
},
{
"NAME": "ORANGE",
"ORDER_DT": "2022-10-01",
"ORDERS": 18
},
{
"NAME": "ORANGE",
"ORDER_DT": "2022-10-02",
"ORDERS": 26
}
]
console.log(compileDayTD(dayTargetDetails));生成 JSON 物件：
{
"APPLE": [
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-01",
"ORDERS": 45
},
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-02",
"ORDERS": 75
},
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-03",
"ORDERS": 15
},
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-04",
"ORDERS": 64
},
{
"NAME": "APPLE",
"ORDER_DT": "2022-10-05",
"ORDERS": 19
}
],
"ORANGE": [
{
"NAME": "ORANGE",
"ORDER_DT": "2022-10-01",
"ORDERS": 18
},
{
"NAME": "ORANGE",
"ORDER_DT": "2022-10-02",
"ORDERS": 26
}
]
}
uj5u.com熱心網友回復：
下面的代碼定義了兩個函式tabulate和tabulatedToString.
函式tabulate獲取輸入資料、表格中要使用的水平和垂直欄位的名稱，以及要用于表格單元格值的欄位名稱。
列舉輸入資料；填充水平和垂直標題；和行物件被創建和填充，鍵入垂直欄位（這里是日期）。cellZero是要在表格左上角使用的值。
函式tabulatedToString提供了將表格資料轉換為格式化字串的示例；這需要調整以輸出 HTML 表格。
const data = [
{ "NAME": "APPLE", "ORDER_DT": "2022-10-01", "ORDERS": 45 },
{ "NAME": "APPLE", "ORDER_DT": "2022-10-02", "ORDERS": 75 },
{ "NAME": "APPLE", "ORDER_DT": "2022-10-03", "ORDERS": 15 },
{ "NAME": "APPLE", "ORDER_DT": "2022-10-04", "ORDERS": 64 },
{ "NAME": "APPLE", "ORDER_DT": "2022-10-05", "ORDERS": 19 },
{ "NAME": "ORANGE", "ORDER_DT": "2022-10-01", "ORDERS": 18 },
{ "NAME": "ORANGE", "ORDER_DT": "2022-10-02", "ORDERS": 26 }]
const tabulate = (data, { x, y, cellZero = y, v }) => {
const xHeadings = new Set
const yHeadings = new Set
const rows = new Map
for(let d of data) {
rows.get(d[y]) || rows.set(d[y], {})
xHeadings.add(d[x])
yHeadings.add(d[y])
rows.get(d[y])[d[x]] = d[v]
}
return { cellZero, xHeadings, yHeadings, rows }
}
const tablulatedToString = ({ cellZero, xHeadings, yHeadings, rows }) => {
const acc = [`${cellZero} | ${[...xHeadings].join(' |')}`]
for(let yh of yHeadings) {
const row = [`${yh}`]
for(let xh of xHeadings) {
row.push(rows.get(yh)[xh])
}
acc.push(row.join(' | '))
}
return acc.join('\n')
}
const options = { x: 'ORDER_DT', y: 'NAME', cellZero: 'Fruit', v: 'ORDERS' }
const tabulated = tabulate(data, options)
console.log(tablulatedToString(tabulated))uj5u.com熱心網友回復：
我在一個使用 Angular 的專案中遇到了這種情況。
對于那些將來會在下面尋找答案的人來說，我是如何實作最終結果的。
const grouped = _.groupBy(this.dayTargetDetails, trgt => trgt.NAME);
Object.keys(grouped).forEach((key) => {
let data = grouped[key];
var result = new DayTargetsTable();
result.NAME = key;
for (var i = 0; i < data.length; i ) {
result["DAY_" this.datePipe.transform(new Date(data[i].ORDER_DT), 'd')] = data[i].ORDERS;
}
this.dayTargetTableDataList.push(result);
});
console.log(this.dayTargetTableDataList);
DayTargetsTable 是打字稿模型檔案
export class DayTargetsTable {
NAME: string;
DAY_1?: number;
DAY_2?: number;
DAY_3?: number;
DAY_4?: number;
DAY_5?: number;
DAY_6?: number;
DAY_7?: number;
DAY_8?: number;
DAY_9?: number;
DAY_10?: number;
DAY_11?: number;
DAY_12?: number;
DAY_13?: number;
DAY_14?: number;
DAY_15?: number;
DAY_16?: number;
DAY_17?: number;
DAY_18?: number;
DAY_19?: number;
DAY_20?: number;
DAY_21?: number;
DAY_22?: number;
DAY_23?: number;
DAY_24?: number;
DAY_25?: number;
DAY_26?: number;
DAY_27?: number;
DAY_28?: number;
DAY_29?: number;
DAY_30?: number;
DAY_31?: number;
constructor() {
this.DAY_1 = null;
this.DAY_2 = null;
this.DAY_3 = null;
this.DAY_4 = null;
this.DAY_5 = null;
this.DAY_6 = null;
this.DAY_7 = null;
this.DAY_8 = null;
this.DAY_9 = null;
this.DAY_10 = null;
this.DAY_11 = null;
this.DAY_12 = null;
this.DAY_13 = null;
this.DAY_14 = null;
this.DAY_15 = null;
this.DAY_16 = null;
this.DAY_17 = null;
this.DAY_18 = null;
this.DAY_19 = null;
this.DAY_20 = null;
this.DAY_21 = null;
this.DAY_22 = null;
this.DAY_23 = null;
this.DAY_24 = null;
this.DAY_25 = null;
this.DAY_26 = null;
this.DAY_27 = null;
this.DAY_28 = null;
this.DAY_29 = null;
this.DAY_30 = null;
this.DAY_31 = null;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/525611.html
下一篇：嘗試遍歷陣列并注釋它們