How do I loop through an object in React?

Question

I'm trying to map an object like this in a but it doesn't work.

manager:  [{…}]
0:
  12:
  name: "Name1"
  surname: "Surname1"
  agenda: Array(2)
       0: {date: "2020-05-27", start_at: "09:00:00", end_at: "10:00:00"}
       1: {date: "2020-05-27", start_at: "10:00:00", end_at: "11:00:00"}
  length: 2
  __proto__: Array(0)
  __proto__: Object

  13: {name: "Name2", surname: "Surname2", agenda: Array(1)}
  __proto__: Object
  length: 1
  __proto__: Array(0)

How can I do??

Firstly I have an array (without agenda) and I have done in this way, but now it doesn't work.

<select title="Choose" onChange={(event) => this.handleChangeManager(event)}>
           <option value="" title="Choose" data-content="Cancel <span class='reset-label'></span>"></option>
            {managers && managers.length && managers.map((manager, key) => (
              <option key={key}  value= {manager.id}  name="manager_id" >{manager.name} {manager.surname}</option>
            ))}
            </select>

I would have the possibility to create a using the name and surname, but also to enter inside the Agenda array (in this case I should do something like manager.agenda.date to visualize the date?)

It seems manager is an array, but not exactly sure what content does it have inside it. Can you share an image of what you get from console.log( manager ) — palaѕн
– palaѕн, Commented May 6, 2020 at 8:10
What do you mean by :"It doesnt work" ? Do you get any error (if yes please share it) or does it just render empty ? — jossefaz
– jossefaz, Commented May 6, 2020 at 8:11
Please try working on 2nd part for some time. If you are not able to make any progress at all then post a new question regarding it and also share the manager array image. Also, post the new question link here. I will try to take a look if I am free around that time. — palaѕн
– palaѕн, Commented May 6, 2020 at 9:06

palaѕн · Accepted Answer · 2020-05-06 08:48:30Z

3

The issue here is that you want to access data stored in manager array as object and .map() method can not be used on the object. For this, you can use the Object.entries() method, as you also need the object key which is actually the manager.id.

So, assuming manager here is the main array we would simply do:

{manager && manager.length && Object.entries(manager[0]).map(([k, v]) => (
   <option 
     key={k}  
     value={k}  
     name="manager_id" >
     {v.name} {v.surname}
   </option>
))}

Note: Please know that you will need to use Object.entries(manager[0]) here as manager[0] is the actually object here.

Here is a simple demo to understand what Object.entries() method does:

const obj = {
  12: {name: 'Name1'},
  13: {name: 'Name2'}
};

Object.entries(obj).map(([k, v]) => {
  console.log(`${k} ${v.name}`);
});

edited May 6, 2020 at 8:48

answered May 6, 2020 at 8:39

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mxsxs2 · Accepted Answer · 2020-05-06 08:24:23Z

Your manager is an array of objects as follows:

manager:  [{…}]
0:
  12:
  name: "Name1"
  surname: "Surname1"
  agenda: Array(2)
       0: {date: "2020-05-27", start_at: "09:00:00", end_at: "10:00:00"}
       1: {date: "2020-05-27", start_at: "10:00:00", end_at: "11:00:00"}
  length: 2
  __proto__: Array(0)
  __proto__: Object

  13: {name: "Name2", surname: "Surname2", agenda: Array(1)}
  __proto__: Object
  length: 1
  __proto__: Array(0)

If you want to map the managers in it then you have to loop the manager array and then then map the managers at each key again.

This is because of the nesting you have in the data:

manager: [{…}]

0:

12:

Or you can access the first element of manager array and map that in render:

...
manager=Object.values(manager[0]) //Do checking here if 0 is actually an object. Object doesn't have .map
...
render(
...
<select title="Choose" onChange={(event) => this.handleChangeManager(event)}>
       <option value="" title="Choose" data-content="Cancel <span class='reset-label'></span>"></option>
        {managers && managers.map((manager, key) => (
          <option key={key}  value= {manager.id}  name="manager_id" > 
 {manager.name} {manager.surname}</option>
        ))}
        </select>

Collectives™ on Stack Overflow

How do I loop through an object in React?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related