Filter nested object in ReactJS

Question

I'm trying to filter an nested array of objects but it's not working as expected....

Here is my json:

[
    {
      "seasson_number": "1",
      "episodes": [
        {
          "number": 1,
          "video_url": "http://test.com",
          "name": "Testing"
        },
        {
          "number": 2,
          "video_url": "http://test.com",
          "name": "Testing"
        }
      ]
    },
    {
      "seasson_number": "2",
      "episodes": [
        {
          "number": 1,
          "video_url": "http://test.com",
          "name": "Testing"
        },
        {
          "number": 2,
          "video_url": "http://test.com",
          "name": "Testing"
        }
      ]      
    }
]

And this is my function to filter by the seasson_number and get the episode name:

const episodios = this.state.seassons
        .filter(seasson => {
            return seasson.seasson_number === "2"; // sample number
        })
        .map(seasson => {
            seasson.episodes.map(episode =>{
                return (
                    <h2>{episode.name}</h2>
                )
            })                
        });

What does your component look like for displaying these episodes? — Zach Stoltz
– Zach Stoltz, Commented Nov 30, 2017 at 18:55
=== comparisons check also if the types of variables are the same. Are you sure seasson.seasson_number is a string? — Canta
– Canta, Commented Nov 30, 2017 at 18:57
@ZachStoltz I'm just trying to display some <h2> inside and <div> — Nataniel Richardt
– Nataniel Richardt, Commented Nov 30, 2017 at 18:57

Zach Stoltz · Accepted Answer · 2017-11-30 19:30:19Z

3

In your first map function, you should add a return statement:

map(seasson => {
        return seasson.episodes.map(episode =>{
            return (
                <h2>{episode.name}</h2>
            )
        })                
    });

edited Nov 30, 2017 at 19:30

Zach Stoltz

2231 silver badge9 bronze badges

answered Nov 30, 2017 at 18:56

SyncroIT

1,5781 gold badge15 silver badges27 bronze badges

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

5 Comments

Zach Stoltz Over a year ago

The first part is not correct because if the seasson_number in the object is "2" than "2" === "2" will return true.

Robbie Milejczak Over a year ago

season number is a string, the issue is the first return

SyncroIT Over a year ago

I have just thought it's a number because of the variable name "seasson_number". Don't blame me for this :

Robbie Milejczak Over a year ago

nobody is blaming you but it is plainly in the original post. The focus of your answer should be the missing return statement and I'd suggest editing it so this answer is clear for any future readers

SyncroIT Over a year ago

I approved the modification of Zach Stoltz. Hope this will help other users :)

Collectives™ on Stack Overflow

Filter nested object in ReactJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related