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
Now, the final output should be look something like this in tabular format
The things which I tried are:-
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
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.
Object.entries(listData.data).forEach(([key, value]) => { // You could use value.map() to iterate over each object in your meeting room field array. }); Object.entries(listData.data).map(([key, value]) => { // You could use value.map() to iterate over each object in your meeting room field array. });
listDatalooks like, when you print it ?listdatalooks like ``` Meeting Room 1:[ 0: {field_name: "SSID Name", value: "xfcsd", section_name: "Meeting Room 1"} 1: {field_name: "name", value: "sdfdsf", section_name: "Meeting Room 1"} ] Meeting Room 2:[ 0: {field_name: "SSID Name", value: "sdfds", section_name: "Meeting Room 2"} 1: {field_name: "name", value: "sdfdsf", section_name: "Meeting Room 2"} ] Meeting Room 3:[ 0: {field_name: "SSID Name", value: "sdfsdf", section_name: "Meeting Room 3"} 1: {field_name: "name", value: "sdfdsfs", section_name: "Meeting Room 3"} ] ```