Trying to create array of arrays: data.map is not a function-CodePudding

I have some data, that looks like this mock data:

const mockData = [
  {
    "1": [
      {
        val1: 0.9323809524,
        val2: 5789.12,
        val3: 84.467,
        val4: 189.12,
        val5: 8,
        bins: 1,
      },
      {
        val1: 10.7328571429,
        val2: 5478.43,
        val3: 84.467,
        val4: -121.57,
        val5: 9,
        bins: 1,
      },
      {
        val1: 1.4457142857,
        val2: 5647.59,
        val3: 84.467,
        val4: 47.59,
        val5: 10,
        bins: 1,
      },
    ],
    "2": [
      {
        val1: 0.9323809524,
        val2: 5289.12,
        val3: 84.467,
        val4: 189.12,
        val5: 8,
        bins: 2,
      },
      {
        val1: 10.7328571429,
        val2: 5178.43,
        val3: 84.467,
        val4: -121.57,
        val5: 9,
        bins: 2,
      },
      {
        val1: 1.4457142857,
        val2: 5547.59,
        val3: 84.467,
        val4: 47.59,
        val5: 10,
        bins: 2,
      }
    ],
    "3": [
      {
        val1: 0.9323809524,
        val2: 5089.12,
        val3: 84.467,
        val4: 189.12,
        val5: 8,
        bins: 3,
      },
      {
        val1: 10.7328571429,
        val2: 5178.43,
        val3: 84.467,
        val4: -121.57,
        val5: 9,
        bins: 3,
      },
      {
        val1: 1.4457142857,
        val2: 5247.59,
        val3: 84.467,
        val4: 47.59,
        val5: 10,
        bins: 3,
      },
    ],
  },
];

So using useState I just set that to:

const [data, setData] = useState(mockData)

What I want to do is iterate through this data to get 3 arrays with the values of e.g. val2. So basically the result should be something like:

const newData = [
    [5789.12, 5478.43, 5647.59],
    [5289.12, 5178.43, 5547.59],
    [5089.12, 5178.43, 5247.59]
]

Now, if I try to do it a bit manually, like:

console.log(Object.keys(data[1].map((x) => x.val2)).map((val) => data[1].map((x) => x.val2)[val]));

Then I get an array for the first entry. But if I try to iterate through it, to actually create a new array of arrays, e.g.:

const [newData, setNewData] = useState([]);

setNewData(
    data.map((y, i) => ({
      Object.keys(y.map((x) => x.val2)).map((val) => y.map((x) => x.val2)[val]),   
    }))
  );

I just get the error Uncaught TypeError: y.map is not a function. I've tried to just Object.keys a few places, without luck, but I may just be confused to why it doesn't work.

So what am I missing here?

CodePudding user response：

{
   Object.keys(y.map((x) => x.val2)).map((val) => y.map((x) => x.val2)[val]),   
}

Your map does not return values properly because of an extra pair of brackets {}. You can check the logic below

const data = [
  {
    "1": [
      {
        val1: 0.9323809524,
        val2: 5789.12,
        val3: 84.467,
        val4: 189.12,
        val5: 8,
        bins: 1,
      },
      {
        val1: 10.7328571429,
        val2: 5478.43,
        val3: 84.467,
        val4: -121.57,
        val5: 9,
        bins: 1,
      },
      {
        val1: 1.4457142857,
        val2: 5647.59,
        val3: 84.467,
        val4: 47.59,
        val5: 10,
        bins: 1,
      },
    ],
    "2": [
      {
        val1: 0.9323809524,
        val2: 5289.12,
        val3: 84.467,
        val4: 189.12,
        val5: 8,
        bins: 2,
      },
      {
        val1: 10.7328571429,
        val2: 5178.43,
        val3: 84.467,
        val4: -121.57,
        val5: 9,
        bins: 2,
      },
      {
        val1: 1.4457142857,
        val2: 5547.59,
        val3: 84.467,
        val4: 47.59,
        val5: 10,
        bins: 2,
      }
    ],
    "3": [
      {
        val1: 0.9323809524,
        val2: 5089.12,
        val3: 84.467,
        val4: 189.12,
        val5: 8,
        bins: 3,
      },
      {
        val1: 10.7328571429,
        val2: 5178.43,
        val3: 84.467,
        val4: -121.57,
        val5: 9,
        bins: 3,
      },
      {
        val1: 1.4457142857,
        val2: 5247.59,
        val3: 84.467,
        val4: 47.59,
        val5: 10,
        bins: 3,
      },
    ],
  },
];

const results = data.map((item) => Object.keys(item).map(key => item[key].map((value) => value.val2))).flat();

console.log(results)