Rendering nested array object values into JSX element

Question

I have a nested array of objects that looks something like this:

[
  {
    _Category: "Animals",
    _Child: {
       _Obj: [{_Title: "Monkey", _Link: "www.monkeys.com"}], [{_Title: "Monkey", _Link: "www.monkeys.com"}], etc
    }
  },
  {
    _Category: "Fruit",
    _Child: {
       _Obj: [{_Title: "Apple", _Link: "www.apples.com"}], [{_Title: "Pineapple", _Link: "www.pineapples.com"}], etc
    }
  }
]

I'm trying to append the _Title and _Link of each group into a JSX element. I've been able to render the _Categories without a problem, but the nested values are giving me a hard time.

When I go to the Elements in DevTools, I can see that there are 11 different groups for each item---which is how many array of objects there are under that particular category---but the _Titles and _Links are empty.

In the code below, I mapped through the _Category data and displayed the Categories that way. Do I have to do something similar for the _Child object---another map, maybe, or something else?

Code:

Element = ({ cats }) => {
    return (
        <div>
            {cats
                .filter((cat) => cat._Root === "Quick Links")
                .map((cat) => (
                    
                 <>
                  <div className={"colFor-" + cat._Category}>
                    <h5>{cat._Category}</h5>

                    {cat._Child._Obj.map((item) => (
                        <>
                            <a href={item._Link}>
                                <p>{item._Title}</p>
                            </a>
                            <br />
                        </>
                    ))}
                        
                   </div>
                  </>
                ))
            }
            
        </div>
    )
  }

Here's what cats looks like:

Update: As @Dominik pointed out, the way my obj was set up was incorrect so I changed it.

Did you mean _Obj inside _Child to be an array maybe? Your JSON is not valid the way you added it. — Dominik
– Dominik, Commented Oct 17, 2020 at 21:52
@Dominik you're right, it was meant to be an array. When I go to the Elements in DevTools, I can now see that there are 11 different groups for each item---which is how many arrays of objects there are under that particular category---but the _Titles and _Links divs are empty. — Bodrov
– Bodrov, Commented Oct 17, 2020 at 22:50

Eric · Accepted Answer · 2020-10-18 01:57:56Z

2

According to your sample data, cat._Child._Obj is an array and each item in it is also an array, so I think you need to flat you array first then use the map function.

const myarr = [[{_Title: "Monkey1", _Link: "www.monkeys1.com"}], [{_Title: "Monkey2", _Link: "www.monkeys1.com"}]];
const myarrFlat = myarr.flat();
myarrFlat.map(cat => console.log(cat._Title, cat._Link));

answered Oct 18, 2020 at 1:57

Eric

1,3771 gold badge11 silver badges8 bronze badges

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

1 Comment

Bodrov Over a year ago

Hey @Eric, I flattened the array and did a bit of tinkering, and I was able to get the data to display. I ran flat() after _Child and then returned the elements---it's worth noting that I adjusted how my _Child obj was created and cut out the middle man. In other words, I no longer had to do cat._Child._Obj...etc. {cat._Child.flat().map((item) => { return ( <a key={item._ID} ...

Collectives™ on Stack Overflow

Rendering nested array object values into JSX element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related