push data in map function

Question

I have an object of data

I'm trying to create another array where I have to get every datapoints in an array by rowLabels.

This is what I expected:

[
    [
      {
        value: "250139",
      },
      {
        value: "51798",
      },
      {
        value: "100",
      },
      {
        value: "100",
      },
      {
        value: "100",
      },
      {
        value: "2197",
      },
      {
        value: "483",
      },
      {
        value: "0.88",
      },
      {
        value: "100",
      },
      {
        value: "100",
      },
    ],
    [
      {
        value: "9731",
      },
      {
        value: "2092",
      },
      {
        value: "100",
      },
      {
        value: "3.89",
      },
      {
        value: "100",
      },
      {
        value: "0",
      },
      {
        value: "0",
      },
      {
        value: "0",
      },
      {
        value: "0",
      },
      {
        value: "0",
      },
    ],
  ];

My code:

let object = {
  "baseId": -1,
  "baseType": "default",
  "rowLabels": [
    "Total",
    "$150+"
  ],
  "groups": [{
      "name": "Total",
      "datapoints": [{
          "uni": "250139",
          "resp": "51798",
          "col": "100",
          "row": "100",
          "idx": "100"
        },
        {
          "uni": "2197",
          "resp": "483",
          "col": "0.88",
          "row": "100",
          "idx": "100"
        }
      ]
    },
    {
      "name": "$50 - $74",
      "datapoints": [{
          "uni": "9731",
          "resp": "2092",
          "col": "100",
          "row": "3.89",
          "idx": "100"
        },
        {
          "uni": "0",
          "resp": "0",
          "col": "0",
          "row": "0",
          "idx": "0"
        }
      ]
    }
  ]
};

const DATA = object.rowLabels.map(() => {
  return object.groups.map((nop) => {
    return nop.datapoints.map((val) => {
      return Object.keys(val).map((dat) => {
        switch (dat) {
          case "uni":
            return {
              value: val[dat],
            };
          case "resp":
            return {
              value: val[dat],
            };
          case "col":
            return {
              value: val[dat],
            };
          case "row":
            return {
              value: val[dat],
            };
          case "idx":
            return {
              value: val[dat],
            };
        }
      });
    });
  });
});

console.log(DATA);

But the result is different from what I want.

what is the problem?

Answer 1

You can use Array.map to extract each object in each datapoint property, then map over the value of each property in the object (with Object.values) and construct a new object.

We can then flatten the resulting array with Array.flat.

const obj = {
    "baseId": -1,
    "baseType": "default",
    "rowLabels": [
        "Total",
        "$150+"
    ],
    "groups": [
        {
            "name": "Total",
            "datapoints": [
                {
                    "uni": "250139",
                    "resp": "51798",
                    "col": "100",
                    "row": "100",
                    "idx": "100"
                },
                {
                    "uni": "2197",
                    "resp": "483",
                    "col": "0.88",
                    "row": "100",
                    "idx": "100"
                }
            ]
        },
        {
            "name": "$50 - $74",
            "datapoints": [
                {
                    "uni": "9731",
                    "resp": "2092",
                    "col": "100",
                    "row": "3.89",
                    "idx": "100"
                },
                {
                    "uni": "0",
                    "resp": "0",
                    "col": "0",
                    "row": "0",
                    "idx": "0"
                }
            ]
        }
    ]
}


const result = obj.groups.map(e => e.datapoints.map(f => Object.values(f).map(g => ({value: g})))).flat()
console.log(result)

Answer 2

The issue is that Object.keys() doesn't return the keys in the order you expect. Instead of using Object.keys, use your own, predefined array of keys with your expected order. You can also get rid of the bloated switch/case that way:

return ['uni', 'resp', 'col', 'row', 'idx'].map((key) => val[key])