How to rearrange this json data using javascript-CodePudding

I am trying to use this json data (below) to draw a 3D cluster chart), I have no idea how to get the data format the chart required.

 [{
        "date": "2022-10-23 00:59:48",
        "coords": {
            "centroid_coordinates": {
                "lat": -7.207031,
                "lon": 168.596191
            },
            "a": {
                "x": -1256364.723016,
                "y": -905736.587501,
                "z": -193874.799252
            },
            "b": {
                "x": -386418.720754,
                "y": -6642.909578,
                "z": 23877.65777
            },
            "c": {
                "x": -129833372.79993,
                "y": -66828394.94447,
                "z": -28968456.528255
            }
        }
    },
    {
        "date": "2022-10-23 02:47:50",
        "coords": {
            "centroid_coordinates": {
                "lat": -7.17041,
                "lon": 141.584473
            },
            "a": {
                "x": -1255562.609906,
                "y": -906938.207607,
                "z": -194414.791666
            },
            "b": {
                "x": -386086.589686,
                "y": -12494.762637,
                "z": 20835.942076
            },
            "c": {
                "x": -129735646.666749,
                "y": -66982246.620175,
                "z": -29035155.240834
            }
        }
    },
    {
        "date": "2022-10-23 04:35:53",
        "coords": {
            "centroid_coordinates": {
                "lat": -7.214355,
                "lon": 114.528809
            },
            "a": {
                "x": -1254758.115314,
                "y": -908137.954559,
                "z": -194955.259706
            },
            "b": {
                "x": -385642.162129,
                "y": -18344.612851,
                "z": 17787.284227
            },
            "c": {
                "x": -129637682.082612,
                "y": -67136009.866602,
                "z": -29101817.979109
            }
        }
    }]

I want to use javascript function to integrate each (a.b.c.d)'s xyz data using javascript and put it into the chart, are their any solutions that helps!

 var data = [{
    x: [-1256364.723016,-386418.720754,-129833372.79993]
    y: [-905736.587501,-6642.909578,-66828394.94447]
    z: [-193874.799252,23877.65777,-28968456.528255]
    }]

I would be very grateful for any tips or resources, so I can get unstuck on this probably not so difficult task. I should mention I'm fairly new to all of this.

Thank you all in advance!

CodePudding user response：

ES6 way is as follows

   const data = initialData.map((perDate) => {
      let coords = perDate.coords
      return({
        x: [coords.a.x, coords.b.x, coords.c.x],
        y: [coords.a.y, coords.b.y, coords.c.y],
        z: [coords.a.z, coords.b.z, coords.c.z]
      })
    })

CodePudding user response：

You can also do this, but it looks like a bit more trouble

data.map(o => o.coords)
    .map(o => [o.a, o.b, o.c])
    .map(o => {
        return {
            x: o.map(x => x.x),
            y: o.map(y => y.y),
            z: o.map(z => z.z),
        }
    }).forEach(o => console.log(o))