How to rearrange this json data using javascript

Question

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!

Are the x, y, and z coordinates of a, b, and c absolute to a shared 0, 0, 0 or are they relative to the centroid in the data structure? — Christopher E. Stith
– Christopher E. Stith, Commented Nov 3, 2022 at 17:53
There are absolute to a shared 0, 0, 0. in the data structure — 40468300
– 40468300, Commented Nov 3, 2022 at 22:27
@40468300 Did you get a chance to look into the answer I added ? I hope it will work as per your expectation. — Rohìt Jíndal
– Rohìt Jíndal, Commented Nov 6, 2022 at 17:04

dileep nandanam · Accepted Answer · 2022-11-03 16:07:09Z

1

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]
      })
    })

answered Nov 3, 2022 at 16:07

dileep nandanam

2,91520 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christopher E. Stith Over a year ago

This is correct for the example if it's static data always of the same size. I imagine OP wants a more general solution that works if there are more or fewer members in the source array.

Rohìt Jíndal · Accepted Answer · 2022-11-04 07:23:47Z

You can simply achieve this with the help of Array.map() method along with Object.keys() method.

Live Demo :

const arr = [{
  "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
    }
  }
}];

const obj = {};

const res = arr.map(({ coords }) => {
  Object.keys(coords).forEach(key => {
    Object.keys(coords[key]).forEach(innerKey => {
      (obj[innerKey]) ? obj[innerKey].push(coords[key][innerKey]) :
      obj[innerKey] = [coords[key][innerKey]]
    })
  })
  return obj;
})

console.log(res);

山河以无恙 · Accepted Answer · 2022-11-03 16:41:28Z

0

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))

answered Nov 3, 2022 at 16:41

山河以无恙

1081 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to rearrange this json data using javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related