CODEWITHSUNDEEP
reactjsfor-loop
Varun.Kumar
Varun.Kumar

Reputation: 192

Nested Loop inside reactjs

I am new to React JS & currently trying to iterate a certain data to present the same in react js but not able to do the same. The data which looks something like this

data

Now, the final output should be look something like this in tabular format

desired-result

The things which I tried are:- tried

tried2

The error which I am getting below one is for 1 image and for second, the code is not getting parsed.

[![error][5]][5]

So, how to achieve the desired output in react js

Upvotes: 0

Views: 68

Answers (1)

Tam
Tam

Reputation: 332

It looks like you're trying to use map onto an object, while you should use it on a collection. Maybe try something like this :

Object.values(listData.data).map((meetingRoom) => { // your code here });

This will allow you to use the content inside your data object as an array of objects.

Edit : Sorry, I didn't understand you need to access the key as well as the value. To achieve that you can simply use Object.entries which will return the key (Meeting Room 1, Meeting Room 2 in this instance) in the first variable and the array of items in the second variable.

Here's a quick example:

Object.entries(listData.data).forEach(([key, value]) => {
    console.log(key, value);
    // You could use value.map() to iterate over each object in your meeting room field array.
});

Note : you can also use a for (... of ...) loop like this instead of a forEach :

for (const [key, value] of Object.entries(listData.data)) {
    console.log(key, value);
};

For more information about the Object.entries method, feel free to check the MDN Webdocs page about it here.

Upvotes: 1

Related Questions