-1

I'm trying to access the all of the items in the JSON object below

{
"Member1": {
    "name": "",
    "position": "",
    "photoPath": ""
},
"Member2": {
    "name": "",
    "position": "",

    "photoPath": ""
},
"Member3": {
    "name": "",
    "position": "",

    "photoPath": ""
},
"Member4": {
    "name": "",
    "position": "",

    "photoPath": ""
}

}

How would I go about looping through each member for their attributes for use in another object using the map() function?

This is what I have so far: I also just throw in variable into the JSX using brackets

  var List = JSONObj.map((Member) => {
return (
  <MemberComponent
  name={Member.name} 
  </MemberComponent>
  );
});

Edit: Object.values.map() did it! Thanks for your help

  • 1
    Does this answer your question? [map function for objects (instead of arrays)](https://stackoverflow.com/questions/14810506/map-function-for-objects-instead-of-arrays) – devserkan Oct 15 '20 at 22:44
  • [Object.keys](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys), [Object.values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values), [Object.entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries) – devserkan Oct 15 '20 at 22:45
  • Object.values.map(...) did it! Thank you so much – Stanley Yang Oct 15 '20 at 23:37

2 Answers2

-1

For objects use the Object api.

Object.keys(obj) // returns the list of keys

Object.values(obj) // returns the list of values

Object.entries(obj) // returns the list of entries (a tuple of key and value)

windowsill
  • 3,599
  • 1
  • 9
  • 14
-1

Below should be able to generate the list.

const list  = Object.keys(myObject).map((member) => 
<MemberComponent name={Member.name} </MemberComponent>
Rain.To
  • 504
  • 2
  • 7