How do i filter an array inside of a array of objects?

Question

I\'m trying to filter a list by tags:

const initialState = [
     {id:1 ,name: \'Product A\', image: \'pic-001.jpg\', tags: [\'nature\', \'campi         


        

Answer 1

Firstly to get all the tags and filter the duplicate tags from initialState. Save the array into uniqueTags.

Then compare the uniqueTags with initialState names, to create another array productTags with objects and its properties tags and products.

const initialState = [
     {id:1 ,name: 'Product A', image: 'pic-001.jpg', tags: ['nature', 'camping', 'winter', 'outdoor']},
     {id:2 ,name: 'Product B', image: 'pic-002.jpg', tags: ['winter', 'hiking', 'family', 'camping', 'snow']},
     {id:3 ,name: 'Product C', image: 'pic-003.jpg', tags: ['vacation', 'family', 'kids', 'river', 'lake', 'fishing']}
   ]

   let allTags = [];
   initialState.map((t)=>t.tags).forEach((a)=>a.forEach((b)=>allTags.push(b)))
   let uniqueTags = allTags.filter((a,i,arr)=>arr.indexOf(a,i+1)===-1)


   productTags = [];
   uniqueTags.forEach((u)=>{
       initialState.forEach((t)=>{
           if(t.tags.includes(u))
            productTags.push({'tag': u, 'product':t.name});
       })
   })


   console.log(JSON.stringify(productTags));

   /*
   [
    { "tag": "nature", "product": "Product A" }, 
    { "tag": "outdoor", "product": "Product A" }, 
    { "tag": "winter", "product": "Product A" }, 
    { "tag": "winter", "product": "Product B" }, 
    { "tag": "hiking", "product": "Product B" }, 
    { "tag": "camping", "product": "Product A" }, 
    { "tag": "camping", "product": "Product B" }, 
    { "tag": "snow", "product": "Product B" }, 
    { "tag": "vacation", "product": "Product C" }, 
    { "tag": "family", "product": "Product B" }, 
    { "tag": "family", "product": "Product C" }, 
    { "tag": "kids", "product": "Product C" }, 
    { "tag": "river", "product": "Product C" }, 
    { "tag": "lake", "product": "Product C" }, 
    { "tag": "fishing", "product": "Product C" }
] */

(Edited later) Correction:

To form the correct object, I have changed the code to:

const initialState = [
     {id:1 ,name: 'Product A', image: 'pic-001.jpg', tags: ['nature', 'camping', 'winter', 'outdoor']},
     {id:2 ,name: 'Product B', image: 'pic-002.jpg', tags: ['winter', 'hiking', 'family', 'camping', 'snow']},
     {id:3 ,name: 'Product C', image: 'pic-003.jpg', tags: ['vacation', 'family', 'kids', 'river', 'lake', 'fishing']}
   ]

   let allTags = [];
   initialState.map((t)=>t.tags).forEach((a)=>a.forEach((b)=>allTags.push(b)))
   let uniqueTags = allTags.filter((a,i,arr)=>!arr.includes(a,i+1))


   productTags = [];
   uniqueTags.forEach((u)=>{
       let productName = [];
       initialState.forEach((t)=>{
           if(t.tags.includes(u))
            productName.push(t.name);
       })
       productTags.push({tag:u, products:productName}); 
   })

   console.log(JSON.stringify(productTags));

   /*
    productTags = [
        {"tag":"nature","products":["Product A"]},
        {"tag":"outdoor","products":["Product A"]},
        {"tag":"winter","products":["Product A","Product B"]},
        {"tag":"hiking","products":["Product B"]},
        {"tag":"camping","products":["Product A","Product B"]},
        {"tag":"snow","products":["Product B"]},
        {"tag":"vacation","products":["Product C"]},
        {"tag":"family","products":["Product B","Product C"]},
        {"tag":"kids","products":["Product C"]},
        {"tag":"river","products":["Product C"]},
        {"tag":"lake","products":["Product C"]},
        {"tag":"fishing","products":["Product C"]}
    ] 
    */