如何从推入平面数组的嵌套数组中获取值？

Question

I have an api returning a dataset like this:

const data = {
  session: ....,
  timestamp: ....,
  samples: [
    {
      key: 'I',
      values: [
        { timing: '12356timingdatething', reading: -37.1234 },
        { timing: '12356timingdatething', reading: -32.1234 },
        { timing: '12356timingdatething', reading: 1.1234 },
        // ....
      ],
    },
    {
      key: 'I',
      values: [
        { timing: '12356timingdatething', reading: -100.1234 },
        { timing: '12356timingdatething', reading: 5.1234 },
        { timing: '12356timingdatething', reading: 5.3334 },
        // ....
      ],
    },
    {
      key: 'I',
      values: [
        { timing: '12356timingdatething', reading: -37.1234 },
        { timing: '12356timingdatething', reading: -32.1234 },
        { timing: '12356timingdatething', reading: 1.1234 },
        // ....
      ],
    },
  ]
}

what I want to do is grab values from samples and push them into a new array that will just be a flat array, something like this:

const newData = [
  [
    { timing: '12356timingdatething', reading: -37.1234 },
    { timing: '12356timingdatething', reading: -32.1234 },
    { timing: '12356timingdatething', reading: 1.1234 },
    // ....
    { timing: '12356timingdatething', reading: -100.1234 },
    { timing: '12356timingdatething', reading: 5.1234 },
    { timing: '12356timingdatething', reading: 5.3334 },
    // ....
    { timing: '12356timingdatething', reading: -37.1234 },
    { timing: '12356timingdatething', reading: -32.1234 },
    { timing: '12356timingdatething', reading: 1.1234 },
    // ....
  ]

I was able to get samples into a new array like so:

this.setState(prevState => ({
  newArray: [...prevState.newArray, [...data.samples] ]
}));

I'm open to using libraries like lodash or ramda if there's a library that exists that would make this easier.

Answer 1

You could use reduce() or flatMap() :

const newData = data.reduce((accumulated, current) => [...accumulated, ...current.values], []);

Or:

const newData = data.flatMap(item => item.values);

Answer 2

You can make use of .reduce() :

let ans = data.samples.reduce((cum,x)=>{
 return [...cum,...(x.values)];   
},[])

Answer 3

With Ramda you can use R.chain with R.prop to values flatten all the values :

 const fn = R.chain(R.prop('values')) const data = {"samples":[{"key":"I","values":[{"timing":"12356timingdatething","reading":-37.1234},{"timing":"12356timingdatething","reading":-32.1234},{"timing":"12356timingdatething","reading":1.1234}]},{"key":"I","values":[{"timing":"12356timingdatething","reading":-100.1234},{"timing":"12356timingdatething","reading":5.1234},{"timing":"12356timingdatething","reading":5.3334}]},{"key":"I","values":[{"timing":"12356timingdatething","reading":-37.1234},{"timing":"12356timingdatething","reading":-32.1234},{"timing":"12356timingdatething","reading":1.1234}]}]} const result = fn(data.samples) console.log(result)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.min.js" integrity="sha512-rZHvUXcc1zWKsxm7rJ8lVQuIr1oOmm7cShlvpV0gWf0RvbcJN6x96al/Rp2L2BI4a4ZkT2/YfVe/8YvB2UHzQw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

With lodash you can use _.flatMap() :

 const data = {"samples":[{"key":"I","values":[{"timing":"12356timingdatething","reading":-37.1234},{"timing":"12356timingdatething","reading":-32.1234},{"timing":"12356timingdatething","reading":1.1234}]},{"key":"I","values":[{"timing":"12356timingdatething","reading":-100.1234},{"timing":"12356timingdatething","reading":5.1234},{"timing":"12356timingdatething","reading":5.3334}]},{"key":"I","values":[{"timing":"12356timingdatething","reading":-37.1234},{"timing":"12356timingdatething","reading":-32.1234},{"timing":"12356timingdatething","reading":1.1234}]}]} const result = _.flatMap(data.samples, 'values') console.log(result)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>