Filtering nested objects and arrays

Question

I have a Vue project and need to search an array with nested objects for a specific object and then return it. The user has a text input field for searching and the search should target "title".

The data looks like this:

const data = 
[{
    "catId": "1",
    "catTitle": "a",
    "exampleArray": [{
        "id": "111",
        "title": "aaa"
    }, {
        "id": "222",
        "title": "bbb"
    }, {
        "id": "333",
        "title": "ccc"
    }]
}, {
    "catId": "2",
    "catTitle": "b",
    "exampleArray": [{
        "id": "444",
        "title": "ddd"
    }, {
        "id": "555",
        "title": "eee"
    }]
}, {
    "catId": "3",
    "catTitle": "c",
    "exampleArray": []
}, {
    "catId": "4",
    "catTitle": "d",
    "exampleArray": [{
        "id": "555",
        "title": "fff"
    }]
}]

I have tried:


return data.filter(item => {
                    return item.catArray.filter(category=> {
                        return category.title.toLowerCase().includes(this.search.toLowerCase())
                    })
                })

e.g. if user input is "aaa", should return:


[{
    "catId": "1",
    "catTitle": "a",
    "exampleArray": [{
        "id": "111",
        "title": "aaa"
    }]
}]

The search should also return all matching results.

Salketer · Accepted Answer · 2022-12-05 08:08:04Z

1

You were almost there!

const data = 
[{
    "catId": "1",
    "catTitle": "a",
    "exampleArray": [{
        "id": "111",
        "title": "aaa"
    }, {
        "id": "222",
        "title": "bbb"
    }, {
        "id": "333",
        "title": "ccc"
    }]
}, {
    "catId": "2",
    "catTitle": "b",
    "exampleArray": [{
        "id": "444",
        "title": "ddd"
    }, {
        "id": "555",
        "title": "eee"
    }]
}, {
    "catId": "3",
    "catTitle": "c",
    "exampleArray": []
}, {
    "catId": "4",
    "catTitle": "d",
    "exampleArray": [{
        "id": "555",
        "title": "fff"
    }]
}];
const search = "aa";

console.log(data.filter(item => {
                    return item.exampleArray.some(category=> {
                        return category.title.toLowerCase().includes(search.toLowerCase())
                    })
                }));
                
console.log(data.map(item => {
                    item.exampleArray =  item.exampleArray.filter(category=> {
                        return category.title.toLowerCase().includes(search.toLowerCase())
                    })
                    return item;
                }).filter(a=>a.exampleArray.length>0))

All I did is add a check for the length after your filter. Because filter expects true or false to know if the element should be included. While it returns an array with results, an empty array is a truthy value. You need to check if the array has elements to filter correctly.

EDIT: I changed to using FIND instead of FILTER. Find will return falsy value if nothing is found, while returning a truthy value (the found element) if something is found. This would have the benefit of not looping through the whole array, stopping as soon as we found something.

EDIT AGAIN: some is the function you want, we learn every day! It does the same as find but instead returns true directly!

edited Dec 5, 2022 at 8:08

answered Dec 2, 2022 at 12:43

Salketer

15.8k2 gold badges32 silver badges64 bronze badges

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

7 Comments

Salketer Over a year ago

On a side note, instead of filter/some you could have used find, thinking about it I think it would be best.

A_A Over a year ago

I'd suggest to use some instead of the nested filter(...).length > 0. It has the same effect, but is more concise and efficient

Salketer Over a year ago

Oh you're right... Reading about it just now, never really used it I really tought it was an alias for filter! Thanks

finnishdev Over a year ago

Thanks, this got me much closer to desired result. Only problem still is that if search term is e.g. 'aa' , I get all of these as a result from exampleArray: [{"id": "111", "title": "aaa"}, { "id": "222", "title": "bbb"}, {"id": "333", "title": "ccc"}] Where the expected outcome is only: [{"id": "111","title": "aaa"}]

Salketer Over a year ago

I did not understand it that way, I have edited the code snippet to add a new console log to have the behaviour you ask. What I did is filter all "exampleArray" elements on the requested search string and then filter all elements that have empty "exampleArray"

|

Rohìt Jíndal · Accepted Answer · 2022-12-02 14:50:18Z

You can achieve this requirement with the help of Array.filter() method along with String.includes()

Live Demo :

const data = [{
  "catId": "1",
  "catTitle": "a",
  "exampleArray": [{
    "id": "111",
    "title": "aaa"
  }, {
    "id": "222",
    "title": "bbb"
  }, {
    "id": "333",
    "title": "ccc"
  }]
}, {
  "catId": "2",
  "catTitle": "b",
  "exampleArray": [{
    "id": "444",
    "title": "ddd"
  }, {
    "id": "555",
    "title": "eee"
  }]
}, {
  "catId": "3",
  "catTitle": "c",
  "exampleArray": []
}, {
  "catId": "4",
  "catTitle": "d",
  "exampleArray": [{
    "id": "555",
    "title": "fff"
  }]
}];

const searchWord = 'aaa';

const res = data.filter(obj => {
  obj.exampleArray = obj.exampleArray.filter(({ title }) => title.includes(searchWord))
  return obj.exampleArray.length;
});

console.log(res);

Collectives™ on Stack Overflow

Filtering nested objects and arrays

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related