I have a problem iterating values of nested array in my react app.
I want the output to be like this"
Shopping
Food
Drink
Sports
Basketball
Soccer
Pls check my codesandbox here CLICK HERE
{results.map((data, index) => (
<ul>
<li>
<div>{data["key"]} </div>
</li>
</ul>
))}
You need to fix salary.jsx like this. To get correct key, you have to use Object.keys(data)[1] instead of data["key"].
import React from "react";
const Salary = () => {
const results = [
{
ID: "shops",
Shopping: [
{ ID: "food.order", Name: "Food" },
{ ID: "drink.order", Name: "Drink" }
]
},
{
ID: "fun",
Sports: [
{ ID: "play.basketball", Name: "Basketball" },
{ ID: "play.soccer", Name: "Soccer" }
]
}
];
const format = (data) => {
const key = Object.keys(data)[1];
const text = data[key].reduce((prev, cur) => {
return prev + ' ' + cur.Name;
}, '')
return key + text;
}
return (
<div>
{results.map((data) => (
<ul>
<li>
<div> {format(data)} </div>
</li>
</ul>
))}
</div>
);
};
export default Salary;
Are you looking for something like this?
import React from "react";
const Salary = () => {
const results = [
{
ID: "shops",
Shopping: [
{ ID: "food.order", Name: "Food" },
{ ID: "drink.order", Name: "Drink" }
]
},
{
ID: "fun",
Sports: [
{ ID: "play.basketball", Name: "Basketball" },
{ ID: "play.soccer", Name: "Soccer" }
]
}
];
return (
<div>
<ul>
{results.map((data, i) =>
Object.keys(data)
.filter((x) => Array.isArray(data[x]))
.map((key) => (
<div key={data.ID}>
<li>{key}</li>
<ul>
{data[key].map((item) => (
<li key={item.ID}>{item.Name}</li>
))}
</ul>
</div>
))
)}
</ul>
</div>
);
};
export default Salary;
I think the reason you have a problem with iterating over results is because it's not in a good shape:
try this if you can:
import React from "react";
const Salary = () => {
const results = [
{
ID: "shops",
Name: "Shopping",
subs: [
{ ID: "food.order", Name: "Food" },
{ ID: "drink.order", Name: "Drink" }
]
},
{
ID: "fun",
Name: "Sports",
subs: [
{ ID: "play.basketball", Name: "Basketball" },
{ ID: "play.soccer", Name: "Soccer" }
]
}
];
return (
<div>
{results.map((data, index) => (
<ul key={data.ID}>
<li>
<div>{data.Name}</div>
{data.subs.length &&
data.subs.map((innerData) => (
<ul key={innerData.ID}>
<li>
<div>{innerData.Name}</div>
</li>
</ul>
))}
</li>
</ul>
))}
</div>
);
};
export default Salary;
Check this snippet. Use nested map and provide key attribute for all li
const Salary = () => {
const results = [
{
ID: "shops",
Shopping: [
{ ID: "food.order", Name: "Food" },
{ ID: "drink.order", Name: "Drink" }
]
},
{
ID: "fun",
Sports: [
{ ID: "play.basketball", Name: "Basketball" },
{ ID: "play.soccer", Name: "Soccer" }
]
}
];
return (
<div>
<ul>
{results.map((data) => (
<li key={data.id}>
{data.ID}
<ul>
{(data.Sports || data.Shopping).map((item) => (
<li key={item.ID}> {item.Name} </li>
))}
</ul>
</li>
))}
</ul>
</div>
);
};
ReactDOM.render(<Salary />, document.querySelector('#app'))<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="app"> </div>
Resultsis an array of objects. When you are mapping Results array you will get object indatavariable. But in your data object there is no key with the name ofkey.