在角度javascript中过滤嵌套的对象数组答案

【问题标题】：Filter Nested array of objects in angular java script在角度javascript中过滤嵌套的对象数组
【发布时间】：2020-09-11 18:32:07
【问题描述】：

嗨，我有以下数组。我想根据用户输入过滤这个数组。我在互联网上搜索过很多关于堆栈溢出的解决方案，我也浏览过数组的文档，但我没有得到任何解决方案。请帮忙...

{
  "data": [
    {
      "categoryId": "1",
      "categoryName": "Pens",
      "subcat": [
        {
          "SubCatId": "1",
          "SubCategoryName": "Classic Cakes",
          "item": [
            {
              "DisplayName": "Excellent 500gms",
              "ItemData": {
                "ItemName": "Excellent"
              }
            },
            {
              "DisplayName": "choco vanila  500gms",
              "ItemData": {
                "Id": "26",
                "ItemName": "choco vanila "
              }
            }
          ]
        },
                {
          "SubCatId": "2",
          "SubCategoryName": "Classic Cakes2",
          "item": [
            {
              "DisplayName": "xyz 500gms",
              "ItemData": {
                "ItemName": "xyz"
              }
            },
            {
              "DisplayName": "abc  500gms",
              "ItemData": {
                "Id": "26",
                "ItemName": "abc vanila "
              }
            }
          ]
        }
      ]
    },
    {
      "categoryId": "2",
      "categoryName": "Markers",
      "subcat": [
        {
          "SubCatId": "2",
          "SubCategoryName": "Premium Cakes I",
          "item": [
            {
              "DisplayName": "choco caramel 500gms",
              "ItemData": {
                "Id": "65",
                "ItemName": "choco caramel"
              }
            },
            {
              "DisplayName": "choco  almond  500gms",
              "ItemData": {
                "Id": "52",
                "ItemName": "choco  almond "
              }
            }
  
          ]
        }
      ]
    }
 
  ]
}

我想对 'categoryName' 、 'SubCategoryName' 、 'DisplayName' 、 'ItemName' 应用过滤器

例如，如果我搜索“choco almond”（即“ItemName”），那么结果数组应该是这样的

{
  "data": [
    {
      "categoryId": "2",
      "categoryName": "Markers",
      "subcat": [
        {
          "SubCatId": "2",
          "SubCategoryName": "Premium Cakes I",
          "item": [
            {
              "DisplayName": "choco  almond  500gms",
              "ItemData": {
                "Id": "52",
                "ItemName": "choco  almond "
              }
            }
  
          ]
        }
      ]
    }
 
  ]
}

如果我搜索“Pens”（即“categoryName”），那么结果数组应该是这样的

{
  "data": [
    {
      "categoryId": "1",
      "categoryName": "Pens",
      "subcat": [
        {
          "SubCatId": "1",
          "SubCategoryName": "Classic Cakes",
          "item": [
            {
              "DisplayName": "Excellent 500gms",
              "ItemData": {
                "ItemName": "Excellent"
              }
            },
            {
              "DisplayName": "choco vanila  500gms",
              "ItemData": {
                "Id": "26",
                "ItemName": "choco vanila "
              }
            }
          ]
        },
                {
          "SubCatId": "2",
          "SubCategoryName": "Classic Cakes2",
          "item": [
            {
              "DisplayName": "xyz 500gms",
              "ItemData": {
                "ItemName": "xyz"
              }
            },
            {
              "DisplayName": "abc  500gms",
              "ItemData": {
                "Id": "26",
                "ItemName": "choco vanila "
              }
            }
          ]
        }
      ]
    }
 
  ]
}

【问题讨论】：

标签： javascript arrays angular multidimensional-array

【解决方案1】：

你可以做的是在过滤器中做一个过滤器。

var filter = "Pens";
var result = d["data"].filter(c=>
c.categoryName==filter ||
c.subcat.filter(s => s.SubCategoryName == filter).length > 0 ||
c.subcat.filter(i => i.item.filter(it => it.ItemData.ItemName == filter).length > 0).length > 0
);
console.log(result)

其中变量“d”是 json/object。

【讨论】：