filter nested array with Javascript

Question

having an array with objects and inside an options array how do I filter the inner array of objects by key value?

Here is the following example:

let test = [{
  "options": [{
     "label": "Audi",
     "value": 10
   },
    {
     "label": "BMW",
     "value": 18
   },
   {
     "label": "Mercedes Benz",
     "value": 116
   },
   {
     "label": "VW",
     "value": 184
   }
 ],
 "label": "test1"
},
{
 "options": [{
    "label": "Adler",
    "value": 3664
  },
  {
    "label": "Alfa Romeo",
    "value": 3
  },
  {
    "label": "Alpine",
    "value": 4
  }
],
 "label": "test2"
}
]

how do I get back the object:

 {
   "label": "Audi",
   "value": 10
 }

if I filter with keyword Audi

return label.toLowerCase().includes(inputValue.toLowerCase());

I tried with the following

test.map((k) => {
              res = k.options.filter((j) => {
                inputValue.toLowerCase();
                if (j.label.toLowerCase().includes(inputValue.toLowerCase())) {
                  return j;
                }
              });
            });

filter() is for creating a new array with elements that meet a condition. If you want to return an element that meets a condition, use find(). — Barmar
– Barmar, Commented Apr 21, 2020 at 19:26

Barmar · Accepted Answer · 2020-04-21 19:29:22Z

You need to return the result of filter(), not just assign it to a variable, so that map() will return the results.

let test = [{
    "options": [{
        "label": "Audi",
        "value": 10
      },
      {
        "label": "BMW",
        "value": 18
      },
      {
        "label": "Mercedes Benz",
        "value": 116
      },
      {
        "label": "VW",
        "value": 184
      }
    ],
    "label": "test1"
  },
  {
    "options": [{
        "label": "Adler",
        "value": 3664
      },
      {
        "label": "Alfa Romeo",
        "value": 3
      },
      {
        "label": "Alpine",
        "value": 4
      }
    ],
    "label": "test2"
  }
]
let inputValue = "audi";
let search = inputValue.toLowerCase();
let result = test.map(k => k.options.filter(j => j.label.toLowerCase().includes(search)));
console.log(result);

thanks a lot, it works I just had to concat the result for my use case!

rksh1997 · Accepted Answer · 2020-04-21 19:31:39Z

1

This will return all options matching the search query :

function find(array, query) {
  return array.reduce((prev, current) => prev.concat(current.options), []).filter(item => item.label.includes(query))
}

find(test, 'Audi')

answered Apr 21, 2020 at 19:31

rksh1997

1,2039 silver badges19 bronze badges

Comments

symlink · Accepted Answer · 2020-04-21 19:54:52Z

1

Use flatMap() followed by filter():

let test=[{options:[{label:"Audi",value:10},{label:"BMW",value:18},{label:"Mercedes Benz",value:116},{label:"VW",value:184}],label:"test1"},{options:[{label:"Adler",value:3664},{label:"Alfa Romeo",value:3},{label:"Alpine",value:4}],label:"test2"}]

let result = test.flatMap(el => {
    return el.options.filter(car => car.label == "Audi")
})[0]

console.log(result)

edited Apr 21, 2020 at 19:54

answered Apr 21, 2020 at 19:48

symlink

12.2k7 gold badges31 silver badges57 bronze badges

Comments

Ivan V. · Accepted Answer · 2020-04-21 21:27:49Z

1

You need to go two levels deep when traversing your array.

function filterArray(needle, haystack) {
  return haystack
    .map(h => h.options)
    .flatMap(h => h )
    .filter(h => h.label.toLowerCase().includes(needle.toLowerCase()));

CodeSandbox

edited Apr 21, 2020 at 21:27

answered Apr 21, 2020 at 19:37

Ivan V.

8,1692 gold badges39 silver badges56 bronze badges

1 Comment

symlink Over a year ago

Thanks for showing me flatMap(), didn't know that existed!

amitesh shukla · Accepted Answer · 2020-04-21 19:35:31Z

0

This might gile your answer:

console.log(test[0].options[0]);

answered Apr 21, 2020 at 19:35

amitesh shukla

513 silver badges14 bronze badges

Collectives™ on Stack Overflow

filter nested array with Javascript

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Related