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.

Your code should work have you tried product.colors[0].main? Or how do you access the colors array precisely? — Ivan Drinchev
– Ivan Drinchev, Commented Dec 11, 2018 at 9:53
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 — MarkBurns
– MarkBurns, Commented Dec 11, 2018 at 9:56

Alex Gray · Accepted Answer · 2018-12-11 09:59:45Z

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>
  );

edited Dec 11, 2018 at 9:59

answered Dec 11, 2018 at 9:55

Alex Gray

4043 silver badges8 bronze badges

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

4 Comments

Ivan Drinchev Over a year ago

This won't work you need to wrap product.colors.map inside { ... }

Alex Gray Over a year ago

Thanks for spotting my mistake, will update the answer now

MarkBurns Over a year ago

Thanks for the quick reply man! Yes indeed, it's just one main colour and one secondary colour. I will try your magic,

MarkBurns Over a year ago

@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

Beginner · Accepted Answer · 2018-12-11 09:59:42Z

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;

Collectives™ on Stack Overflow

ReactJS - Trying to access Nested Arrays by fetching JSON data

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related