[英]Javascript group nested object array into another array
我有一個數組用於跟蹤某些文檔的狀態。 從 Mongo 聚合 function 輸出時,這看起來像以下內容k
是狀態, v
是具有此狀態的文檔數。
[
{
"legal": [
{ "k": "", "v": 6 },
{ "v": 3},
{ "k": "To be uploaded", "v": 5 },
{ "k": "To be reviewed", "v": 96 }
],
"operations": [
{ "v": 1 },
{ "k": "To be uploaded", "v": 3 },
{ "k": "To be reviewed", "v": 24 }
],
"accounting": [
{ "k": "To be reviewed", "v": 137 },
{ "k": "", "v": 3 },
{ "v": 2 },
{ "k": "To be uploaded", "v": 24 },
{ "k": "Not Required", "v": 1 }
]
}
]
我想在堆疊條形圖上繪制這些圖形,並需要以下格式。 數據數組的順序是 ["legal", "operations", "accounting"]
[
{
name: "", // no status specified
data: [9, 1, 5]
},
{
name: "To be uploaded",
data: [5, 3, 24]
},
{
name: "To be reviewed",
data: [96, 24, 137]
},
{
name: "Not Required",
data: [0, 0, 1]
},
]
一種方法是結合使用Array#map
和Array#reduce
方法,如下所示。 Array#reduce
非常適合創建數據摘要和清理數據 object,而Array#map
有助於最終呈現。 當然,它可以改進:
const input = [ { "legal": [ { "k": "", "v": 6 }, { "v": 3}, { "k": "To be uploaded", "v": 5 }, { "k": "To be reviewed", "v": 96 } ], "operations": [ { "v": 1 }, { "k": "To be uploaded", "v": 3 }, { "k": "To be reviewed", "v": 24 } ], "accounting": [ { "k": "To be reviewed", "v": 137 }, { "k": "", "v": 3 }, { "v": 2 }, { "k": "To be uploaded", "v": 24 }, { "k": "Not Required", "v": 1 } ] } ], summary = input.map( ({legal,operations,accounting}) => ({ legal:legal.reduce((acc,{k,v}) => ({...acc,[k || "NONE"]:(acc[k || "NONE"] || 0) + v}),{"Not Required":0}), operations:operations.reduce((acc,{k,v}) => ({...acc,[k || "NONE"]:(acc[k || "NONE"] || 0) + v}),{"Not Required":0}), accounting:accounting.reduce((acc,{k,v}) => ({...acc,[k || "NONE"]:(acc[k || "NONE"] || 0) + v}),{"Not Required":0}) }) ), output = summary.flatMap( o => Object.keys(Object.values(o)[0]).map( z => ({ name: z === "NONE"? "": z, data: Object.keys(o).map(y => o[y][z]) }) ) ); console.log( output );
或者.....
您可以按如下方式動態創建summary
:
const input = [ { "legal": [ { "k": "", "v": 6 }, { "v": 3}, { "k": "To be uploaded", "v": 5 }, { "k": "To be reviewed", "v": 96 } ], "operations": [ { "v": 1 }, { "k": "To be uploaded", "v": 3 }, { "k": "To be reviewed", "v": 24 } ], "accounting": [ { "k": "To be reviewed", "v": 137 }, { "k": "", "v": 3 }, { "v": 2 }, { "k": "To be uploaded", "v": 24 }, { "k": "Not Required", "v": 1 } ] } ], summary = input.flatMap( o => Object.keys(o).reduce( (ac,cat) => ({...ac, [cat]:o[cat].reduce((acc,{k,v}) => ({...acc,[k || "NONE"]:(acc[k || "NONE"] || 0) + v}),{"Not Required":0}) }),{} ) ), output = summary.flatMap( o => Object.keys(Object.values(o)[0]).map( z => ({ name: z === "NONE"? "": z, data: Object.keys(o).map(y => o[y][z]) }) ) ); console.log( output );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.