ReactJS - Trying to access Nested Arrays by fetching JSON data

Question

I'm struggling over here when trying to access nested arrays from a fetched json file.

It's all great until I get to the subarrays.

JSON

{
 "id": 001,
 "name": "Tom",
 "description": "test1",
 "colors": [{
 "main": "green",
 "secondary": "red"
 }]
},
{
 "id": 002,
 "name": "Sam",
 "description": "test2",
 "colors": [{
 "main": "blue",
 "secondary": "yellow"
 }]
} 

JSX

export class UserOverview extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 product: [],
 isLoaded: false,
 }
 }
componentDidMount() {
 fetch('https://localhost:3000/api')
 .then(res => res.json())
 .then(json => {
 this.setState({ 
 isLoaded: true,
 product: json,
 })
 });
}
 render() {
 var { isLoaded, product } = this.state;
 if (!isLoaded) {
 return <div>Loading...</div>;
 }
 else {
 return (
 <ul>
 {product.map(product => (
 <li key={product.id}>
 Name: {product.name} | Shape: {product.description}
 </li>
 ))}
 </ul>
 );
 }
 }
}
export default UserOverview;

Rendering the ID, name and description works fine. But for some reason I can't access then nested arrays, tried different stuff but I'm a bit lost.

In this case, I am trying to render the main colours for the 2 results (Tom and Sam), what is the best way to access these nested arrays?

Any help would be greatly appreciated.

• Ivan Drinchev: Your code should work have you tried product.colors[0].main? Or how do you access the colors array precisely?
• MarkBurns: Hi @drinchev, thanks for the fast answer! Yeah, Im trying to access the colors array to be honest, by just adding an extra <li> or something. I will try your solution! Thanks again

Answer 1

As your colors is an array you can use another map function inside the first map function to render the colors as HTML. Your return method would look something like this:

return (
 <ul>
 {product.map(product => (
 <li key={product.id}>
 Name: {product.name} | Shape: {product.description}
 {product.colors.map(color => (<span>{color.main} {color.secondary}</span>))}
 </li>
 ))}
 </ul>
 );

You could also access the colors by using indexing as it will be the first result in the array. Your return method would look something like this:

return (
 <ul>
 {product.map(product => (
 <li key={product.id}>
 Name: {product.name} | Shape: {product.description}
 <span>{product.colors[0].main} {product.colors[0].secondary}</span>
 </li>
 ))}
 </ul>
 );

The bigger question is should colors be an array or just an object with a main and secondary color? Is each record going to have multiple main and secondary colors?

If your not expecting each record to have more than one main color you would expect the data structure to look more like:

{
 "id": 001,
 "name": "Tom",
 "description": "test1",
 "colors": {
 "main": "green",
 "secondary": "red"
 }
}

If you change you data structure as above, the render method will look like this:

return (
 <ul>
 {product.map(product => (
 <li key={product.id}>
 Name: {product.name} | Shape: {product.description}
 <span>{product.colors.main} {product.colors.secondary}</span>
 </li>
 ))}
 </ul>
 );

• Ivan Drinchev: This won't work you need to wrap product.colors.map inside { ... }
• Alex Gray: Thanks for spotting my mistake, will update the answer now
• MarkBurns: Thanks for the quick reply man! Yes indeed, it's just one main colour and one secondary colour. I will try your magic,
• MarkBurns: @AlexGray Thanks a lot man! Its rendering the nested arrays indeed. Can't believe I was missing on this small improvement... Thanks a lot again

Answer 2

You need to access the colors property, which is an array of having 1 element, which means 0 index so you. Inside the 0 index you have an object having two properties main and secondary.

So you can access as product.colors[0].main.

Please see the code. I hope this will solve the issue.

JSON

{
 "id": 001,
 "name": "Tom",
 "description": "test1",
 "colors": [{
 "main": "green",
 "secondary": "red"
 }]
},
{
 "id": 002,
 "name": "Sam",
 "description": "test2",
 "colors": [{
 "main": "blue",
 "secondary": "yellow"
 }]
} 

JSX

export class UserOverview extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 product: [],
 isLoaded: false,
 }
 }
componentDidMount() {
 fetch('https://localhost:3000/api')
 .then(res => res.json())
 .then(json => {
 this.setState({ 
 isLoaded: true,
 product: json,
 })
 });
}
 render() {
 var { isLoaded, product } = this.state;
 if (!isLoaded) {
 return <div>Loading...</div>;
 }
 else {
 return (
 <ul>
 {product.map(product => (
 <li key={product.id}>
 Name: {product.name} | Shape: {product.description}
 | Color: {product.colors[0].main}
 </li>
 ))}
 </ul>
 );
 }
 }
}

export default UserOverview;