How do I filter an array of object containing an array of object itself?

Question

I have an array of articles that are linked to some tags via a many to many system. When I want to get all my articles, the JSON that comes back looks as follows:

[
    {
        "id": 1,
        "title": "Subin",
        "content": "Integer ac leo...",
        "illustration": "http://dummyimage.com/1920x1080.png/ff4444/ffffff",
        "lang": "fr",
        "tags": [
            {
                "name": "project",
                "description": "Praesent id massa...",                   
                "slug": "854963934-6",
                "id": 4,
            },
            {
                "name": "Grass-roots",
                "description": "Proin eu mi...",
                "slug": "528521892-6",
                "id": 2,
            }
        ]
    },
    {
        "id": 2,
        "title": "Voyatouch",
        "content": "Curabitur gravida nisi at nibh...",
        "illustration": "http://dummyimage.com/1920x1080.png/cc0000/ffffff",
        "lang": "fr",
        "tags": [
            {
                "name": "Grass-roots",
                "description": "Proin eu mi...",
                "slug": "528521892-6",
                "id": 2,
            },
            {
                "name": "User-friendly",
                "description": "Vestibulum quam sapien...",
                "slug": "237872269-9",
                "id": 1,
            }
        ]
    },
]

I would like to filter the articles by their tags. If I click on a tag, then all the articles having this tag keeps showing up while the other disappear.

Normally, I would do the following if the tags were just an array of strings:

filter (tag) {
  // This is a VueJS context
  return this.articles.filter(article => article.tag === tag)
}

However, since it's an array of object, I tried to do the following:

filter (tag) {
  let self = this
  return this.articles.filter(article => {
    return article.tags.filter(tag => tag.name === self.selected)
  })
}

But it returns nothing.

What would the correct method be?

Thank you in advance

Eddie · Accepted Answer · 2018-10-31 15:54:41Z

1

You can use filter() to filter the array. Use some() to check if the article has a certain tag.

var arr = [{"id":1,"title":"Subin","content":"Integer ac leo...","illustration":"http://dummyimage.com/1920x1080.png/ff4444/ffffff","lang":"fr","tags":[{"name":"project","description":"Praesent id massa...","slug":"854963934-6","id":4},{"name":"Grass-roots","description":"Proin eu mi...","slug":"528521892-6","id":2}]},{"id":2,"title":"Voyatouch","content":"Curabitur gravida nisi at nibh...","illustration":"http://dummyimage.com/1920x1080.png/cc0000/ffffff","lang":"fr","tags":[{"name":"Grass-roots","description":"Proin eu mi...","slug":"528521892-6","id":2},{"name":"User-friendly","description":"Vestibulum quam sapien...","slug":"237872269-9","id":1}]}]

var tagName = "project"; //Tag name to search
var result = arr.filter(o => o.tags.some(x => x.name === tagName));;

console.log(result);

Doc: .filter(), .some()

answered Oct 31, 2018 at 15:54

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

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

2 Comments

Jaeger Over a year ago

Perfect, I tried with some() but didn't understand how it worked so I didn't push more, thank you! (I only can accept your answer in 5mn, sorry)

Eddie Over a year ago

Happy to help :)

Collectives™ on Stack Overflow

How do I filter an array of object containing an array of object itself?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related