如何將JSON資料物件轉換為Highcharts系列資料？

我有一些 JSON 資料物件，需要將其轉換為 Highcharts 系列資料，我用我對 JS 的最少知識進行了很多嘗試，但我做不到，

json物件：

[
    {
        "actionId": "fd799109-7cfd-489b-acce-28e2b538258e",
        "actionName": "Stand",
        "withInteraction": 1.4,
        "withoutInteraction": 1.2,
        "knee": 2.4,
        "arm": 2.3,
        "trunk": 0,
        "leg": 0,
        "neck": 2
    },
    {
        "actionId": "a64eee9f-3b71-4335-a4cd-b62cf1e4e270",
        "actionName": "Walk",
        "withInteraction": 1.4,
        "withoutInteraction": 1.2,
        "knee": 2.4,
        "arm": 2.3,
        "trunk": 0,
        "leg": null,
        "neck": null
    },
    {
        "actionId": "9ca31804-0084-4bd5-8bfc-32f8a99c1c22",
        "actionName": "Bend",
        "withInteraction": 2.4,
        "withoutInteraction": 2.7,
        "knee": 2.4,
        "arm": 2.3,
        "trunk": 0,
        "leg": 0,
        "neck": 2
    },
    {
        "actionId": "08f4d687-436b-4faa-9d4f-0c4fe77f7ac7",
        "actionName": "Move",
        "withInteraction": 1.4,
        "withoutInteraction": 1.2,
        "knee": 2.4,
        "arm": 2.3,
        "trunk": 0,
        "leg": 0,
        "neck": 2
    }
]

上面的資料需要轉換成如下圖

series: [
    {
      name: 'knee',
      data: [2.4, 2.4, 2.4, 2.4],
      color : '#78e08f'
    }, {
      name: 'leg',
      data: [0,null,0,0],
      color : '#c23616'
    },
{...}
]

請幫我解決這個問題，在此先感謝。

uj5u.com熱心網友回復：

如果您創建資料系列名稱的陣列（通過從第一個物件中獲取所有作為資料值的鍵）和要分配給這些系列的顏色，則可以迭代鍵并從回傳 json 資料（我假設您已將其決議為 JavaScript 物件）：

const keys = Object.keys(jsondata[0]).filter(k => !["actionId", "actionName"].includes(k))

const colours = keys.map((_) => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`)

const result = {
  series: keys.map((key, i) => ({
    name: key,
    data: jsondata.map(o => o[key]),
    color: colours[i]
  }))
}

console.log(result)

<script type="text/javascript">
  const jsondata = [{
      "actionId": "fd799109-7cfd-489b-acce-28e2b538258e",
      "actionName": "Stand",
      "withInteraction": 1.4,
      "withoutInteraction": 1.2,
      "knee": 2.4,
      "arm": 2.3,
      "trunk": 0,
      "leg": 0,
      "neck": 2
    },
    {
      "actionId": "a64eee9f-3b71-4335-a4cd-b62cf1e4e270",
      "actionName": "Walk",
      "withInteraction": 1.4,
      "withoutInteraction": 1.2,
      "knee": 2.4,
      "arm": 2.3,
      "trunk": 0,
      "leg": null,
      "neck": null
    },
    {
      "actionId": "9ca31804-0084-4bd5-8bfc-32f8a99c1c22",
      "actionName": "Bend",
      "withInteraction": 2.4,
      "withoutInteraction": 2.7,
      "knee": 2.4,
      "arm": 2.3,
      "trunk": 0,
      "leg": 0,
      "neck": 2
    },
    {
      "actionId": "08f4d687-436b-4faa-9d4f-0c4fe77f7ac7",
      "actionName": "Move",
      "withInteraction": 1.4,
      "withoutInteraction": 1.2,
      "knee": 2.4,
      "arm": 2.3,
      "trunk": 0,
      "leg": 0,
      "neck": 2
    }
  ]
</script>

uj5u.com熱心網友回復：

您可以使用散列分組方法，以及邏輯空值分配(??=)

const data = [{"actionId":"fd799109-7cfd-489b-acce-28e2b538258e","actionName":"Stand","withInteraction":1.4,"withoutInteraction":1.2,"knee":2.4,"arm":2.3,"trunk":0,"leg":0,"neck":2},{"actionId":"a64eee9f-3b71-4335-a4cd-b62cf1e4e270","actionName":"Walk","withInteraction":1.4,"withoutInteraction":1.2,"knee":2.4,"arm":2.3,"trunk":0,"leg":null,"neck":null},{"actionId":"9ca31804-0084-4bd5-8bfc-32f8a99c1c22","actionName":"Bend","withInteraction":2.4,"withoutInteraction":2.7,"knee":2.4,"arm":2.3,"trunk":0,"leg":0,"neck":2},{"actionId":"08f4d687-436b-4faa-9d4f-0c4fe77f7ac7","actionName":"Move","withInteraction":1.4,"withoutInteraction":1.2,"knee":2.4,"arm":2.3,"trunk":0,"leg":0,"neck":2}];

const reservedlKeys = ["actionId","actionName"];

const getColor = (key) => '#000000';

const groups = data.reduce((acc, item) => {
    Object.entries(item).forEach(([key, value]) => {
      if (!reservedlKeys.includes(key)) {
        acc[key] ??= { name: key, data: [], color: getColor(key) };
        acc[key].data.push(value);
      }
    });
    return acc;
}, {});

const series = Object.values(groups);

console.log(series)

.as-console-wrapper { max-height: 100% !important; top: 0 }

標籤：javascript 数组 json 目的

上一篇：python與類的資料關系，無法正確傳遞資料

下一篇：從 Linux 內核角度探秘 JDK NIO 檔案讀寫本質