Navigating through complex data structures of nested objects and arrays to selectively

Question

Navigating through complex data structures of nested objects and arrays to selectively

I am currently working on a Vue project where I need to search through an array of nested objects to find a specific object based on the "title" property. The user interface includes a text input field for conducting the search operation.

The structure of the data is as follows:

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 attempted the following code snippet in my search function:


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

For example, if the user inputs "aaa", the expected output should be:


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

The search functionality is designed to retrieve all matching results that meet the specified criteria.

javascript arrays vue.js

Answer 1

Answer №1

Just a little bit more to go!

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))

I made a slight adjustment by incorporating a check for array length after your filter operation. Filter functions based on true or false conditions to determine inclusion of elements, and an empty array is considered truthy. Therefore, it's essential to verify if the array contains elements for accurate filtering.

UPDATE: I opted for using FIND instead of FILTER. Find returns a falsy value when nothing matches, but a truthy value (the found element) if there's a match. This approach saves time by stopping the loop once a match is found.

ANOTHER UPDATE: some method serves the purpose better than find, we keep learning every day! It directly returns true upon finding a match!

Answer 2

Just a little bit more to go!

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))

I made a slight adjustment by incorporating a check for array length after your filter operation. Filter functions based on true or false conditions to determine inclusion of elements, and an empty array is considered truthy. Therefore, it's essential to verify if the array contains elements for accurate filtering.

UPDATE: I opted for using FIND instead of FILTER. Find returns a falsy value when nothing matches, but a truthy value (the found element) if there's a match. This approach saves time by stopping the loop once a match is found.

ANOTHER UPDATE: some method serves the purpose better than find, we keep learning every day! It directly returns true upon finding a match!

Answer 3

Answer №2

To meet this requirement, you can utilize the Array.filter() method in combination with String.includes()

Check out a demonstration below:

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

Answer 4

To meet this requirement, you can utilize the Array.filter() method in combination with String.includes()

Check out a demonstration below:

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

Navigating through complex data structures of nested objects and arrays to selectively

Answer №1

Answer №2

Similar questions

When dealing with back-end data in JavaScript, converting long types can result in a

How are jQuery.ajax and XMLHttpRequest different from each other?

form controls disappear upon adding form tags

How can we utilize Javascript to add both days and years to the current date?

"Using Angular, when $event is triggered on multiple child elements, each child

The issue of not being able to use res.flush as a function in Express-sse is

What is the best way to determine the total number of classes that come before a specific element

Guide on how to retrieve a specific object element within a Vue.js list using Nuxt

JavaScript function is returning 'undefined' instead of an integer

Tips for transmitting `props` information between parent and child components using react router

Concealing specific sections of HTML content in a webview on the fly

Error: Unable to locate module 'react-calendar-heatmap'

Vue: Show or hide components based on URL conditions

IDEA 2021.2 NPM SCRIPTS: Looks like there are no scripts available

Is there a way to have incoming messages automatically align to the left or right based on the sender, without using the float property?

What is the best way to configure a basic firebase ajax call?

JavaScript-based tool for extracting content from Sketch file

Is it necessary for TypeScript classes that are intended for use by other classes to be explicitly exported and imported?

After several interactions, the CSS files fail to load

Navigating through elements in an array in node.js