Angular 8.1.2 - Filter nested objects

Question

I have a need for a similar filter logic as the fiddler on this post Older post, but for a newer version of Angular.

The Fiddler example on this older post, seems to work exactly how I would like mine to work with the nested JSON objects (4 levels deep).. I am just at a lost of how to do the same with in my Anuglar 8 solution.

My data structure, looks like the following:

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

I would like to be able to filter by the name of the RepairItem OR its SOR Code, but also return the full Sub and Parent objects so I can show the results under there parent/sub category etc on the UI.

Here is what I have tried so far: Stackblitz

Any help would be greatly appreciated!

Thanks

what have you tried? please show some code and try to setup a minimal repro on stackblitz so that people can help you out — maxime1992, Jan 22 '20 at 15:51
Hi @maxime1992 - I have tried filtering the dataset using a custom pipe, but I am struggling to get it to work the way I want, filtering through the repair items. I found this sample http://jsfiddle.net/7aeL2yd2/ that seems to work the way I wish mine to, but it was written in Angular 1, not sure how I would port this across to latest version of Angular. See link below for what I have tried so far: https://stackblitz.com/edit/angular-cg4l7a — Craig Mayers, Jan 23 '20 at 12:09

random · Answer 1 · 2020-01-22T16:13:22.883

Extract the name, age and subCategories, then iterate over the subCategories and apply filter on 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]}]);

Hi random, Thanks for the example, I will try this out today and let you know how it goes. :-) — Craig Mayers, Jan 23 '20 at 12:10
apologies for the late reply, this logic seems to work fine :-), however I need to to return the parent elements (SubCategory & MainCategory) also of the matched item(s) - so I can show a break/drill down of the searched results in the view — Craig Mayers, Mar 09 '20 at 10:20

Angular 8.1.2 - Filter nested objects

1 Answers1