Clay_F Clay_F - 2 months ago 8
Javascript Question

How do I turn part of Redux store into an array

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:

enter image description here

Answer

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"}
]
*/