如何過濾包含對象本身數組的對象數組？

Question

我有一系列文章，這些文章通過多對多系統鏈接到某些標簽。 當我想獲取所有文章時，返回的JSON如下所示：

[
    {
        "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,
            }
        ]
    },
]

我想按文章的標簽過濾文章。 如果單擊標簽，則所有帶有該標簽的文章將繼續顯示，而其他文章消失。

通常，如果標簽只是一個字符串數組，我將執行以下操作：

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

但是，由於它是一個對象數組，因此我嘗試執行以下操作：

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

但是它什么也沒返回。

正確的方法是什么？

先感謝您

Answer 1

您可以使用filter()過濾數組。 使用some()檢查文章是否具有特定標簽。

 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（）