Mapping throught an array with Objects

Question

new to React Native, how would I go about getting values from this data Object. In JSX return statement, I'm mapping through the whole array and getting access to data.x and data.y, but how would I map through the "z" object to get the values for each key? For example "nimi": "Chest Fly" ("Chest Fly" would be the one needed in this case). Thank you in advance!

Array [
  Object {
    "x": "7. toukokuuta 2021",
    "y": "rintatreeni",
    "z": Object {
      "Chest Fly": Object {
        "nimi": "Chest Fly",
        "sarjat": 3,
        "toistot": 10,
      },
      "Dipit": Object {
        "nimi": "Dipit",
        "sarjat": 3,
        "toistot": "10-15",
      },
      "Penkkipunnerrus": Object {
        "nimi": "Penkkipunnerrus",
        "sarjat": 3,
        "toistot": 10,
      },
      "Punnerrukset": Object {
        "nimi": "Punnerrukset",
        "sarjat": 3,
        "toistot": "5-10",
      },
      "Pystypunnerrus": Object {
        "nimi": "Pystypunnerrus",
        "sarjat": 3,
        "toistot": "8-10",
      },
      "Tricep Pushdown": Object {
        "nimi": "Tricep Pushdown",
        "sarjat": 3,
        "toistot": 10,
      },
      "Vipunosto": Object {
        "nimi": "Vipunosto",
        "sarjat": 3,
        "toistot": 10,
      },
    },
  },
]

Here is my current code:

 <List.Section title="Tehdyt Treenit">
                   {
                       treenit.map((item, index) => {
                        
                           return(
                            
                        <List.Accordion key={index}
                        title={`${item.x} - ${item.y}`}
                        left={props => <List.Icon {...props} icon="folder" />}
                        >
                       {Object.keys(item.z).map(key,idx => {
                            return(
                            <List.Item key={idx} title={treeniData[key]} />
                            )
                        })} 
                     
                    </List.Accordion>
                               
                              
                           )
                       })
                   }
                   </List.Section>

"treenit" is an array state.

Does this answer your question? [Iterate through object properties](https://stackoverflow.com/questions/8312459/iterate-through-object-properties) — goto, May 07 '21 at 12:39

Jonathan Weibel · Accepted Answer · 2021-05-07T13:49:57.473

2

EDIT:

According to List.Item API https://callstack.github.io/react-native-paper/list-item.html I would write something like:

{Object.values(item.z).map(zItem => {
  let desc = `Sarjat: ${zItem.sarjat}, Toistot: ${zItem.toistot}`;
  return(
    <List.Item key={zItem.nimi} title={zItem.nimi} description={desc} />
  )
})}

ORIGINAL ANSWER:

You can use Object.values() to loop over the z object, e.g.

yourArray.map(item => {
  return Object.values(item.z).find(zItem => zItem.nimi === "Chest Fly");
})

Result:

[{
    "nimi": "Chest Fly",
    "sarjat": 3,
    "toistot": 10
}]

edited May 07 '21 at 13:49

answered May 07 '21 at 12:57

Jonathan Weibel

136
6

Sorry for the poor explanation, but the idea is to render all of those exercise objects in a list accordion, not to find a specific one. The accordion title is the x which is name of the workout, then y, which is the date. Then z is the additional data that includes for example how many push-ups did the user complete. – niemax May 07 '21 at 13:09
Thank you for the details and the current code. To display z title, looks like you can just replace treeniData[key] with key in your title property. By the way, It think you should also use key instead of idx for the key property, in order to have stable ids for rendered items. – Jonathan Weibel May 07 '21 at 13:25
This works! Thank you so much, you're the mvp. Struggled with this for a while. – niemax May 07 '21 at 13:52
Yeah, that was because of this line : `{Object.keys(item.z).map(key,idx => {` You would have needed parenthesis to wrap you args: `{Object.keys(item.z).map((key,idx) => {` – Jonathan Weibel May 07 '21 at 13:56
Hi @niemax, could you mark the answer as "accepted"? Thank you. – Jonathan Weibel May 11 '21 at 13:39

Mapping throught an array with Objects

1 Answers1