How do I turn part of Redux store into an array

Question

Okay, here's the pickle that I'm in, one of my actions in actions/index.js is:

export function requestPeople() {
  return (dispatch, getState) => {
    dispatch({
      type: REQUEST_PEOPLE,
    })

  const persistedState = loadState() // just loading from localStorage for now
  console.log(persistedState)


  //Object.keys(persistedState).forEach(function(i) {
  //var attribute = i.getAttribute('id')

      //console.log('test', i,': ', persistedState[i])
      //myArr.push(persistedState[i])

    //})
    //console.log(myArr)
  //dispatch(receivePeople(persistedState)) // I'm stuck here
 }
}

and when I console.log(persistedState) from above in the Chrome console I get my people state exactly like this.

Object {people: Object}

Then when I drill down into people: Object above, I get them like this:

abc123: Object
abc124: Object
abc125: Object

and when I drill down into each one of these puppies (by clicking on the little triangle in Chrome console) I get each like this:

abc123: Object
  firstName: 'Gus'
  id: 'abc123'
  lastName: 'McCrae'

// when I drill down into the second one I get
abc124: Object
  firstName: 'Woodrow'
  id: 'abc124'
  lastName: 'Call'

Now, here's where I'm stuck.

The table I'm using is Allen Fang's react-bootstrap-table which only accepts array's, and it get's called like this <BootstrapTable data={people} /> so my above data needs to be converted to an array like this:

const people = [{
  id: abc123,
  firstName: 'Gus',
  lastName: 'McCrae'
}, {
  id: abc124,
  firstName: 'Woodrow',
  lastName: 'Call'
}, {
  ...
}]

// and eventually I'll call <BootstrapTable data={people} />

My question specifically is how do I convert my people state shown above into this necessary array? In my action/index.js file I've tried: Object.keys(everything!!!)

And lastly, once I have the array, what's the best way to pass that array into <BootstrapTable data={here} /> using state, a variable, a dispatched action, something I've never heard of yet?

Any help will be very much appreciated!! FYI, this is my first question in Stack Overflow, feels nostalgic. I'm a full-time police officer, and trying learn to code on the side. Thanks again!

UPDATE:

Thanks to a suggestion by Piotr Berebecki, I'm tying it this way:

export function requestPeople() {
  return (dispatch, getState) => {
    dispatch({
      type: REQUEST_PEOPLE,
    })

const persistedState = loadState()
console.log('persistedState:', persistedState)

const peopleArr = Object.keys(persistedState.people).map(function(key) {
  return persistedState[key]
})

console.log(JSON.stringify(peopleArr))

//dispatch(receivePeople(persistedState))
  }
}

and getting [null,null,null]

like this:

Answer 1

Welcome to Stack Overflow :)

To convert your nested persistedState.people object to an array you can first establish an interim array of keys using Object.keys(persistedState.people) and then map() over the keys to replace each key with an object found in your original nested object - persistedState.people - at that key. You can assign the resultant array to a variable which you can then pass to the BootstrapTable. Check the code below and a demo here: http://codepen.io/PiotrBerebecki/pen/yaXrVJ

const persistedState = { 
  people: { 
    'abc123' : {
      id:'abc123',firstName: 'Gus', lastName: 'McCrae'
    }, 
    'abc124' : {
      id:'abc124',firstName: 'Woodrow', lastName: 'Call'
    }, 
    'abc125' : {
      id:'abc125',firstName: 'Jake', lastName: 'Spoon'
    }
  }
}


const peopleArr = Object.keys(persistedState.people).map(function(key) {
  return persistedState.people[key];
});


console.log(JSON.stringify(peopleArr));
/* 
Logs the following array:
[
 {"id":"abc123","firstName":"Gus","lastName":"McCrae"},
 {"id":"abc124","firstName":"Woodrow","lastName":"Call"},
 {"id":"abc125","firstName":"Jake","lastName":"Spoon"}
]
*/