尝试创建 arrays 数组：data.map 不是 function

Question

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 eg 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, eg:

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?

Answer 1

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