Javascript filter parent array based on child containing value

Question

I am trying to filter the parent array products based on the selected value which should be contained as the child. For example in my case I was trying to get all the product objects as an array which contained the string "iphone". It is not working for me and I can't seem to locate my error. Please may someone help.

What I have tried:

    const selected = 'iphone'

const products =  [
     {
      id: "4irnflpd0",
      productItem:  [ "iphone", "ipad", "kindle"],
    },
     {
      id: "glrscb1m3s9k",
      productItem:  ["airpods","iphone",],
    },
     {
      id: "uumkugk3jxof",
      productItem:  ["macbook","cable"]
    },
]

var filtered = products.map(o=>{
    o = Object.assign({},o);   //Clone the object. So any changes will not affect the original array.
    o.productItem.map(p=>{   //Use map to loop thru the products
        p = p.filter(v=>v === selected);  //Filter the products which include selected
    });
    return o;
})

Expected array output:

const products =  [
    {
        id: "4irnflpd0",
        productItem:  [ "iphone", "ipad", "kindle"],
      },
       {
        id: "glrscb1m3s9k",
        productItem:  ["airpods","iphone",],
      },
]

Answer 1

You can use the filter() methods on products array and find if the selected item is available in the productItems

 const selected = 'iphone' const products = [ { id: "4irnflpd0", productItem: [ "iphone", "ipad", "kindle"] }, { id: "glrscb1m3s9k", productItem: ["airpods","iPhone",] }, {id: "uumkugk3jxof", productItem: ["macbook","cable"] } ] var filtered = products.filter(product => product.productItem?.includes(selected)); console.log(filtered);

Answer 2

Just a simple filter() method should work for us in this case. T further simplify, we can also use object restructuring, so instead of writing product.productItem.includes(selected) , we'll only need to write productItem.includes(selected) .

All we have to do is filter the source array by which items include the selected value:

 const selected = 'iphone'; const products = [ { id: "4irnflpd0", productItem: ["iphone", "ipad", "kindle"] }, { id: "glrscb1m3s9k", productItem: ["airpods", "iphone", ] }, { id: "uumkugk3jxof", productItem: ["macbook", "cable"] }, ]; const filtered = products.filter(({productItem}) => productItem.includes(selected)); console.log(filtered);

If you'd prefer not to use Object destructuring, just swap that filter line for this more traditional one:

products.filter(p => p.productItem.includes(selected))

If you're not sure that every single item in your array will have the productItem key, then you should use optional chaining to prevent an error being thrown. This is as simple as adding ? before after property name. Here it is all put together:

products.filter(p => p.productItem?.includes(selected))

Answer 3

First of all no need to make a copy since with map function you allocated the result to new variable without changing the new array So you need to do this

const filtered = products.map(p=>{
    return p.productItem.includes(selected)
})