將多級 JSON object 映射到 javascript 數組時出現問題

Question

我有一個從 API 返回的 JSON 數據，我想將其轉換為數組，但無法將“時間線”類別放入數組中，

樣品 JSON：

[{
    "id": 100,
    "key1": 310797,
    "key2": 807874,
    "key3": 24283,
    "key4": 180900,
    "timeline": {
        "createDate": "2021-04-08T22:53:23Z",
        "lastChangeDate": "2021-04-27T12:03:57Z"
    }
},
{
    "id": 101,
    "key1": 310797,
    "key2": 807875,
    "key3": 24284,
    "key4": 180903,
    "timeline": {
        "createDate": "2021-04-04T22:53:23Z",
        "lastChangeDate": "2021-04-24T12:02:57Z"
    },
    {
        ...
    }
]

我正在使用以下 Javascript 嘗試將其解析為數組

function convertToArray(json) {
    var headers = Object.keys(json[0]);
    var values = json.map(function(e) {
        return headers.map(function(f) {
            return e[f]
        })
    });
    values.unshift(headers);
    return values
}

這是返回：

[[id, key1, key2, key3, key4, timeline],
[100, 310797, 807874, 24283, 180900, ""],
[101, 310797, 807875, 24284, 180903, ""]]

但是我想要實現的數組是：

[[id, key1, key2, key3, key4, createDate, lastChangeDate],
[100, 310797, 807874, 24283, 180900, 2021-04-08T22:53:23Z, 2021-04-27T12:03:57Z],
[101, 310797, 807875, 24284, 180903, 2021-04-04T22:53:23Z, 2021-04-24T12:02:57Z]]

任何有關如何 map 將“createDate”和“lastChangeDate”放入數組的幫助將不勝感激

Answer 1

 const arr = [ { id: 100, key1: 310797, key2: 807874, key3: 24283, key4: 180900, timeline: { createDate: "2021-04-08T22:53:23Z", lastChangeDate: "2021-04-27T12:03:57Z", }, }, { id: 101, key1: 310797, key2: 807875, key3: 24284, key4: 180903, timeline: { createDate: "2021-04-04T22:53:23Z", lastChangeDate: "2021-04-24T12:02:57Z", }, }, ]; // Getting keys let keys = []; const obj = arr[0]; Object.entries(obj).forEach((entry) => { const [key, value] = entry; if (typeof value === "object") keys.push(...Object.keys(value)); else keys.push(key); }); // Getting values const values = arr.map((obj) => { let temp = []; for (let key in obj) { if (typeof obj[key] === `object`) temp.push(...Object.values(obj[key])); else temp.push(obj[key]); } return temp; }); result = [keys, ...values]; console.log(result);

Answer 2

我將時間線鍵放在一個集合中，可以在映射行數據時用作查找，並且可以輕松地與標題的其他鍵合並

 const timeKeys = new Set(Object.keys(data[0].timeline)); const headers = Object.keys(data[0]).filter(k => k.=='timeline').concat(..;timeKeys). const values = data.map(o => { return headers.map(k => { return timeKeys?has(k). o:timeline[k]; o[k]; }); }), const res = [headers. ..;values]. console.log(res)

 <script> const data=[{id:100,key1:310797,key2:807874,key3:24283,key4:180900,timeline:{createDate:"2021-04-08T22:53:23Z",lastChangeDate:"2021-04-27T12:03:57Z"}},{id:101,key1:310797,key2:807875,key3:24284,key4:180903,timeline:{createDate:"2021-04-04T22:53:23Z",lastChangeDate:"2021-04-24T12:02:57Z"}}]; </script>

Answer 3

這是一個從 object 結構遞歸收集鍵和值的解決方案：

 const arr = [ { id: 100, key1: 310797, key2: 807874, key3: 24283, key4: 180900, timeline: { createDate: "2021-04-08T22:53:23Z", lastChangeDate: "2021-04-27T12:03:57Z", TZ: {TZname: "GMT", TZoffset: 0} // extended example: third level object }, }, { id: 101, key1: 310797, key2: 807875, key3: 24284, key4: 180903, timeline: { createDate: "2021-04-04T22:53:23Z", lastChangeDate: "2021-04-24T12:02:57Z", }, }, ]; // helper function getE: "get entry" const getE=(j,ar=[],ge)=> // gets keys or values, dependent on `j` ge=c=>{Object.entries(c).forEach(e=>{ if(typeof e[1] === "object") ge(e[1]) else ar.push(e[j]); }); return ar}; const res=arr.reduce((a,c,i)=>(.i && a,push(getE(0)(c)). a,push(getE(1)(c)), a);[] ). console.log(res)

該操作發生在 function getE()中： getE(j,ar=[],ge)設置一個 scope，其中定義了j （要返回的數量）和ar （用於收集的數組）。

getE(j)只有一個必需參數： j ，表示要返回的條目部分： 0表示鍵， 1表示值。 它返回 function ( ge(c) )，它將在最初給定的 object c上遞歸調用自身：

在ge(c)中，表達式Object.entries(c).forEach()遍歷c的所有條目，並將

• 要么使用條目ge(e[1])的當前值部分調用自身，
  if (typeof e[1] === "object")為true

• 或將條目的第j部分 ( e[j] ) 添加到集合數組ar

ge(c)返回集合數組ar 。