Question

我需要与Older post上的提琴手类似的过滤器逻辑，但是需要更新的Angular版本。

此较早的帖子上的Fiddler示例似乎完全可以按照我希望的方式使用嵌套的JSON对象（深4级）进行工作。.我对如何在Anuglar中执行相同操作一无所知8解决方案。

我的数据结构如下：

[{
"name": "Repair Category Name",
"image": "https://via.placeholder.com/150",
"subCategories": [
  {
        "name": "Repair SubCategory Name 1",
        "image": "https://via.placeholder.com/150",
        "selectorOptions": [
          {
            "name": "Repair Selector Option 1",
        "image": "https://via.placeholder.com/150",
        "repairItems": [
            {
              "name": "Repair Item 1",
              "image": "https://via.placeholder.com/150",
              "sorCode": "12345"
            },
            {
              "name": "Repair Item 2",
              "image": "https://via.placeholder.com/150",
              "sorCode": "12345"
            }
      ]
          }
      ]
    },
    {
        "name": "Repair SubCategory Name 2",
        "image": "https://via.placeholder.com/150",
        "selectorOptions": [
          {
            "name": "Repair Selector Option 1",
        "image": "https://via.placeholder.com/150",
        "repairItems": [
            {
              "name": "Repair Item 1",
              "image": "https://via.placeholder.com/150",
              "sorCode": "12345"
            },
            {
              "name": "Repair Item 2",
              "image": "https://via.placeholder.com/150",
              "sorCode": "12345"
            }
      ]
          }
      ]
    }
]}]

我希望能够按 RepairItem 的名称或其 SOR代码进行过滤，但是还可以返回完整的Sub和Parent对象，因此我可以显示结果在用户界面的父/子类别等下。

这是我到目前为止尝试过的：Stackblitz

任何帮助将不胜感激！

谢谢

Answer 1

提取name, age and subCategories，然后迭代subCategories并在filter上应用repairItems。

const input = [{
    "name": "Repair Category Name",
    "image": "https://via.placeholder.com/150",
    "subCategories": [
        {
            "name": "Repair SubCategory Name 1",
            "image": "https://via.placeholder.com/150",
            "selectorOptions": [
                {
                    "name": "Repair Selector Option 1",
                    "image": "https://via.placeholder.com/150",
                    "repairItems": [
                        {
                            "name": "Repair Item 1",
                            "image": "https://via.placeholder.com/150",
                            "sorCode": "12345"
                        },
                        {
                            "name": "Repair Item 2",
                            "image": "https://via.placeholder.com/150",
                            "sorCode": "12345"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Repair SubCategory Name 2",
            "image": "https://via.placeholder.com/150",
            "selectorOptions": [
                {
                    "name": "Repair Selector Option 1",
                    "image": "https://via.placeholder.com/150",
                    "repairItems": [
                        {
                            "name": "Repair Item 1",
                            "image": "https://via.placeholder.com/150",
                            "sorCode": "12345"
                        },
                        {
                            "name": "Repair Item 2",
                            "image": "https://via.placeholder.com/150",
                            "sorCode": "12345"
                        }
                    ]
                }
            ]
        }
    ]
}];

const searchCode = "12345";

const {name, image, subCategories} = input[0];

let filteredOptions = [];

subCategories.forEach(({selectorOptions}) => {
    const matchresults = selectorOptions[0].repairItems.filter(({sorCode}) => sorCode === searchCode);
    filteredOptions.push(...matchresults);
});

console.log([{name, image, subCategories: [ ...filteredOptions]}]);

Angular 8.1.2-过滤嵌套对象

1 个答案: