Vue/javascript Filter In Deep Object Inside Object Array

I need to filter in deep the categories object inside an array, in an array with multiple objects. In an API call , I will have this array of objects with nested categories. I need

Solution 1:

You mean something like this - filter arrays that is inside objects that is in your main array? You can iterate your array of object as you wish and do filter in cycle. Or use map method as in example below:

const obj = [{
      ID: 1,
      name: 'Item A',
      taxonomy : {
        categories : [{
            name: "Book",
            parent: 12,
            taxonomy: "category",
          },{
            name: "Cover",
            parent: 4,
            taxonomy: "category",
          },{
            name: "Other",
            parent: 15,
            taxonomy: "category",
        }]
      }
    },{
      ID: 2,
      name: 'Item B',
      taxonomy : {
        categories : [{
            name: "Toys",
            parent: 16,
            taxonomy: "category",
          },{
            name: "Book",
            parent: 12,
            taxonomy: "category",
          },{
            name: "Other",
            parent: 15,
            taxonomy: "category",
        }]
      }
    },{
      ID: 3,
      name: 'Item C',
      taxonomy : {
        categories : [{
            name: "Ext",
            parent: 6,
            taxonomy: "category",
          },{
            name: "Cover",
            parent: 4,
            taxonomy: "category",
          },{
            name: "Other",
            parent: 15,
            taxonomy: "category",
        }]
      }
}];
  
// Map and filter nested contentconst res = obj.map(a => {
  a.taxonomy.categories = a.taxonomy.categories.filter(x => x.parent === 15);
  return a;
});
  
// Logconsole.log(res)

Or if you mean you want to filter your main array to only contain object that has nested array with some value - then this is little modification of previous code

const obj = [{
      ID: 1,
      name: 'Item A',
      taxonomy : {
        categories : [{
            name: "Book",
            parent: 12,
            taxonomy: "category",
          },{
            name: "Cover",
            parent: 4,
            taxonomy: "category",
          },{
            name: "Other",
            parent: 15,
            taxonomy: "category",
        }]
      }
    },{
      ID: 2,
      name: 'Item B',
      taxonomy : {
        categories : [{
            name: "Toys",
            parent: 16,
            taxonomy: "category",
          },{
            name: "Book",
            parent: 12,
            taxonomy: "category",
          },{
            name: "Other",
            parent: 15,
            taxonomy: "category",
        }]
      }
    },{
      ID: 3,
      name: 'Item C',
      taxonomy : {
        categories : [{
            name: "Ext",
            parent: 6,
            taxonomy: "category",
          },{
            name: "Cover",
            parent: 4,
            taxonomy: "category",
          },{
            name: "Other",
            parent: 15,
            taxonomy: "category",
        }]
      }
}];
  
// Map and filter nested contentconst res = obj.filter(a => {
  if((a.taxonomy.categories.filter(x => x.parent === 6)).length > 0) return a;
});
  
// Logconsole.log(res)

Solution 2:

The code below should return an array of only item objects in which the nested categories array has been filtered for matches.

Note that:

• Only items containing at least 1 matching category are returned (meaning if an item didn't contain any matching categories, it will not be present in the output).
• Only matching categories are present in the output.
• If categoryFilterFunc returns no matches across all items and categories, the return value will be an empty array.

const obj = {
  items_loop : [
    {
      ID: 1,
      name: 'Item A',
      taxonomy : {
        categories : [
          {
            name: "Book",
            parent: 12,
            taxonomy: "category",
          },
          {
            name: "Cover",
            parent: 4,
            taxonomy: "category",
          },
          {
            name: "Other",
            parent: 15,
            taxonomy: "category",
          },                                                                              
        ]
      }
    },
    {
      ID: 2,
      name: 'Item B',
      taxonomy : {
        categories : [
          {
            name: "Toys",
            parent: 16,
            taxonomy: "category",
          },
          {
            name: "Book",
            parent: 12,
            taxonomy: "category",
          },
          {
            name: "Other",
            parent: 15,
            taxonomy: "category",
          },                                                                              
        ]
      }
    },
    {
      ID: 3,
      name: 'Item C',
      taxonomy : {
        categories : [
          {
            name: "Ext",
            parent: 6,
            taxonomy: "category",
          },
          {
            name: "Cover",
            parent: 4,
            taxonomy: "category",
          },
          {
            name: "Other",
            parent: 15,
            taxonomy: "category",
          },             
        ]
      }
    },                      
  ]
};

functionfilterCategories(someObject, categoryFilterFunc) {
  return someObject.items_loop.reduce((accum, item) => {
    const filtered = item.taxonomy.categories.filter(categoryFilterFunc);
    if (filtered.length > 0) {
      // Creating a deep copy will have some performance impact (depending on// how many items and nested categories you need to iterate over)// but seems advisable for nested objects. Up to you if you// want to keep it.const deepCopy = JSON.parse(JSON.stringify(item));
      deepCopy.taxonomy.categories = filtered;
      accum.push(deepCopy);
    }
    return accum;
  }, []);
}

const matchingItems = filterCategories(obj, categoryObj =>15 === categoryObj.parent);

console.log(matchingItems);