How to render a nested array?

Question

I am getting a response from an endpoint which is this:

[[{"1":"91"}],[{"1":"1"}],[{"1":"0"}],[{"1":"0"}],[{"1":"0"}],[{"1":"0"}],[{"1":"0"}],[{"1":"0"}]]

I fetched them and I get the results but I cannot render them. This is what I have been trying:

render() {
        const {count} = this.state;
        return (
            <div>
                {count.count && count.count.map(item => (
                    item.value.map(data => (
                        data.value.map(x => (
                            <p>{x.value}</p>
                        ))
                    ))
                ))}
            </div>
        )
    }

I expect the out to be all the numbers shown in the json response. Ex. 91 1 0 0 0 etc.

I'm not sure what's going on. You're showing one object and handle it as it totally different. You're using 3 map while you have 2 levels in the object. Also, where value prop came from? In the object, there is not value. And you're expect the result to contains 94.. but you have no 94 in the object. Where the count come from? etc. — Mosh Feu
– Mosh Feu, Commented May 28, 2019 at 12:11

Dani Vijay · Accepted Answer · 2019-05-28 13:13:26Z

1

First of all, the structure the array you're trying to iterate is like an array of arrays, with objects within. So, start iterate first and second arrays first, then iterate the object within. Object.keys can be used for that.

You can access it like the following,

...
    <div>
      {count &&
        count.length > 0 &&
        count.map(
          item =>
            item.length > 0 &&
            item.map(
              el =>
                Object.keys(el).length > 0 &&
                Object.keys(el).map(val => <p>{el[val]}</p>)
            )
        )}
    </div>
...

Codesandbox demo here

Stackblitz demo here

edited May 28, 2019 at 13:13

answered May 28, 2019 at 12:21

Dani Vijay

2,2682 gold badges25 silver badges38 bronze badges

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

4 Comments

Dani Vijay Over a year ago

Please share your state. It like, count: {count: [[{"1":"91"}],[{"1":"1"}],[{"1":"0"}],[{"1":"0"}],[{"1":"0"}],[{"1":"0"}],[{"1":"0"}],[{"1":"0"}]]}, right?

josh Over a year ago

count: Array[8] 0: Array[1] 0: {…} 1: "91"

Dani Vijay Over a year ago

Directly iterate count then, instead of count.count. I've edited the answer. Refer codesandbox too.

Dani Vijay Over a year ago

stackblitz.com/edit/react-55mj54 ^ Added the array statically because the API is not available. Also added a check for count is empty or not.

Collectives™ on Stack Overflow

How to render a nested array?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related