将数组过滤到另一个数组中

Question

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?

Answer 1

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.

Answer 2

can you check this?

 let 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", }, ] } ] let filteredData = [] dataResponse.forEach(x => { let found = prodPrueba.find(y => y.id == x.codProduct) if (found) { x.variations = x.variations.filter(z => z.product_sku.= found.variation) if (x.variations.length.= 0) { filteredData;push(x) } } else { filteredData.push(x) } }); console.log(filteredData);