具有嵌套对象的多选过滤器数组

Question

I use vue-multiselect to let user select items with filtering options:

query = "what user type in input field"
allLinks.filter(l=>l.labelName.includes(query))

and it works, but now I would like to extend the filtering to all properties of my object with this structure :

{
    "labelName":"LK000056",
    "extPort":{
        "aPort":"EXTA-EQ001/board10port02",
        "zPort":"EXTZ-EQ012/board09port02"
    }
}

I would like with one query to get parent object if query match on labelName, aPort or zPort.

it is possible ? or maybe with a conditional way like :

allLinks.filter(l=>if(!l.labelName.includes(query)){l.extport.aPort.includes(query)}else{l.extport.zPort.includes(query)})

thank for helping me

forgive my approximate English I am French

Answer 1

You could recursively flatten the objects to array of strings, then search in them via Array.filter , Array.some & Array.includes :

 const data = [{ "labelName":"LK000056", "extPort":{ "aPort":"EXTA-EQ001/board10port02", "zPort":"EXTZ-EQ012/board09port02" } }, { "labelName":"LK000057", "extPort":{ "aPort":"EXTA-EQ001/board123", "zPort":"EXTZ-EQ012/board333" } }] const flatten = (obj, a=[]) => Object.values(obj) .reduce((r,c) => (typeof c == 'object' ? flatten(c,a) : r.push(c), r), a) const search = (d, t) => d.filter(x => flatten(x).some(x => x.toLowerCase().includes(t.toLowerCase()))) console.log(search(data, 'board123')) console.log(search(data, 'LK000056')) console.log(search(data, 'EXTZ-EQ012')) 

Note that this is a generic approach and will work regardless of the nested levels of data , for example:

 const data = [{ "A": { "B": { "C": { "data": '11' }, } } }, { "D": { "E": { "data": '22' } } }, { "F": "33" }] const flatten = (obj, a = []) => Object.values(obj) .reduce((r, c) => (typeof c == 'object' ? flatten(c, a) : r.push(c), r), a) const search = (d, t) => d.filter(x => flatten(x).some(x => x.toLowerCase().includes(t.toLowerCase()))) console.log(search(data, '22')) console.log(search(data, '11')) console.log(search(data, '33')) 

Answer 2

You can use Object.values to get the values of the object as an array, then use some to test if one or more items match.

 const items = [{ "labelName": "LK000056", "extPort": { "aPort": "EXTA-EQ001/board10port02", "zPort": "EXTZ-EQ012/board09port02" } }, { "labelName": "234234", "extPort": { "aPort": "abc123", "zPort": "1234567890" } }] function search(query, data) { return data.filter(i => { if (i.labelName.includes(query)) return true if (Object.values(i.extPort).some(v => v.includes(query))) return true return false }) } console.log(search("EQ001", items)) console.log(search("1234567890", items)) console.log(search("lalalala", items)) 

Answer 3

if it can help I think found a functional solution let me know if something better can be done ...

allLinks.filter(l=>{
    if (l.sdhPort.zSDHPort!=undefined && l.extPort.aPort.toUpperCase().includes(query.toUpperCase())){return true}
    if (l.extport.zPort!=undefined && l.extPort.zPort.toUpperCase().includes(query.toUpperCase())){return true}
    if (l.labelName!=undefined && l.labelName.toUpperCase().includes(query.toUpperCase())){return true}
})

Answer 4

wow thanks both of you !

it seems really interesting this technic ... but let me some time to understand it

what do think about what I found ?

best regards