Issue
explain my situation i want to filter my response of my API thats return an array to make this question i take this data of testing
this prodPrueba simulates the products and variations selected by the user
let prodPrueba = [
{
id: "B801278",
variation: "B801278-18",
},
{
id: "PC002",
variation: "PC002",
},
];
The id its the code of a product selected and the variation its the variation selected by the user for a product, example… a shoes its a product and the size 18 its the variation B801278-18
this is the response of my backend
let dataResponse = [
{
codProduct: "PC002",
created_at: "2021-01-19T11:28:06.000000Z",
desc: null,
html_description: null,
html_short_description: null,
id_kit: null,
kit: [],
manufacturer: null,
material: null,
name: "Kit de Limpeza",
id: "PC002",
status: "active",
tags: null,
theme: null,
title: null,
type: null,
variations:
[
{
product: "PC002",
cod: "U",
sku: "U",
product_sku: "PC002",
price: 96000,
}
]
},
{
codProduct: "ENG792015_9",
created_at: "2021-01-19T11:27:59.000000Z",
desc: null,
html_description: null,
html_short_description: null,
id_kit: null,
kit: [],
manufacturer: null,
material: null,
name: "Charm en Plata.",
id: "ENG792015_9",
status: "active",
tags: null,
theme: null,
title: null,
type: null,
variations: [
{
cod: "U",
product: "ENG792015_9",
product_sku: "ENG792015_9",
price: 415000,
sku: "U"
}
]
},
{
codProduct: "B801278",
created_at: "2021-01-19T11:27:30.000000Z",
desc: null,
html_description: null,
html_short_description: "Set de Regalo Brazalete en Plata Clip",
id_kit: null,
kit: [],
manufacturer: null,
material: null,
name: "Set de Regalo Brazalete en Plata, Clip",
id: "B801278",
status: "active",
tags: null,
theme: null,
title: null,
type: null,
variations: [
{
cod: "U",
price: 950000,
product: "B801278",
product_sku: "B801278",
sku: "U"
},
{
cod: "20",
price: 950000,
product: "B801278",
product_sku: "B801278-20",
sku: "U",
},
{
cod: "19",
price: 950000,
product: "B801278",
product_sku: "B801278-19",
sku: "U",
},
{
cod: "18",
price: 950000,
product: "B801278",
product_sku: "B801278-18",
sku: "U",
},
]
}
]
as you see in the object "prodPrueba" i have 2 id’s thats coincide with products thats return the API, also into prodPrueba i have an property calls "variation" thats coincide with the "product_sku" of the variation that comes by each product thats return the api. I want to filter the response to get all the variations except those that i have in my prodPrueba i try with filter, map, forEach and i dont know how to do this, any suggestion?
Solution
https://jsfiddle.net/par7hu5s/
// Test data setup
const prodPrueba = [
{
id: "B801278",
variation: "B801278-18",
},
{
id: "PC002",
variation: "PC002",
},
];
let dataResponse = [
{
codProduct: "PC002",
created_at: "2021-01-19T11:28:06.000000Z",
desc: null,
html_description: null,
html_short_description: null,
id_kit: null,
kit: [],
manufacturer: null,
material: null,
name: "Kit de Limpeza",
id: "PC002",
status: "active",
tags: null,
theme: null,
title: null,
type: null,
variations:
[
{
product: "PC002",
cod: "U",
sku: "U",
product_sku: "PC002",
price: 96000,
}
]
},
{
codProduct: "ENG792015_9",
created_at: "2021-01-19T11:27:59.000000Z",
desc: null,
html_description: null,
html_short_description: null,
id_kit: null,
kit: [],
manufacturer: null,
material: null,
name: "Charm en Plata.",
id: "ENG792015_9",
status: "active",
tags: null,
theme: null,
title: null,
type: null,
variations: [
{
cod: "U",
product: "ENG792015_9",
product_sku: "ENG792015_9",
price: 415000,
sku: "U"
}
]
},
{
codProduct: "B801278",
created_at: "2021-01-19T11:27:30.000000Z",
desc: null,
html_description: null,
html_short_description: "Set de Regalo Brazalete en Plata Clip",
id_kit: null,
kit: [],
manufacturer: null,
material: null,
name: "Set de Regalo Brazalete en Plata, Clip",
id: "B801278",
status: "active",
tags: null,
theme: null,
title: null,
type: null,
variations: [
{
cod: "U",
price: 950000,
product: "B801278",
product_sku: "B801278",
sku: "U"
},
{
cod: "20",
price: 950000,
product: "B801278",
product_sku: "B801278-20",
sku: "U",
},
{
cod: "19",
price: 950000,
product: "B801278",
product_sku: "B801278-19",
sku: "U",
},
{
cod: "18",
price: 950000,
product: "B801278",
product_sku: "B801278-18",
sku: "U",
},
]
}
]
// First, we create an array of the current variation codes held in prodPrueba
const currentVariations = prodPrueba.map(p => p.variation);
// A reduce function is good if you need to drop products which have no variations after filtering
dataResponse = dataResponse.reduce((acc, curr) => {
curr.variations = curr.variations.filter(v => {
// Filter out any skus that are already in currentVariations
return currentVariations.includes(v.product_sku) === false;
})
// Optional step to remove products with no variations, otherwise just push without the 'if' part
if (curr.variations.length > 0) acc.push(curr);
return acc;
}, [])
console.log(dataResponse);I didn’t know if you wanted to drop the products entirely if there are no variations available after filtering (seemed likely you would), but I’ve made notes about how to adapt it either way.
Note: The reduce function can be initially overwhelming if you haven’t used it before, but it is defintely worth learning.