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
– maxime1992, Commented Jan 22, 2020 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 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: stackblitz.com/edit/angular-cg4l7a — Craig Mayers
– Craig Mayers, Commented Jan 23, 2020 at 12:09

random · Accepted Answer · 2020-01-22 16:13:22Z

0

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]}]);

edited Jan 22, 2020 at 16:13

answered Jan 22, 2020 at 16:06

random

7,9093 gold badges21 silver badges25 bronze badges

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

4 Comments

Craig Mayers Over a year ago

Hi random, Thanks for the example, I will try this out today and let you know how it goes. :-)

random Over a year ago

@CraigMayers - Sure :)

Craig Mayers Over a year ago

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

random Over a year ago

@CraigMayers - Please post the required output.

Collectives™ on Stack Overflow

Angular 8.1.2 - Filter nested objects

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related