filter array into another array

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?

i want to get dataResponse in the product who codProduct is "B801278" all variations except one, that one who has product_sku "B801278-18" because that variation is selected in prodPrueba i'm sorry if my english its to bad — Yohesky Portillo
– Yohesky Portillo, Commented Mar 16, 2021 at 3:02

floodlitworld · Accepted Answer · 2021-03-16 03:13:50Z

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.

YES!! that works men, thanks a lot!! i've to study the reducer method then because i understand what you did but in the metohod reducer i confuse a bit
Once it clicks, it's not very difficult. Basically, reduce is a method on Arrays which iterates through each item and passes an accumulator from one iteration to the next. You will usually be providing two arguments: 1. The callback function to execute on each item of the array 2. The initial value of the accumulator A very simple example might be: const arr = [1, 2, 3, 4, 5]; const total = arr.reduce((acc, curr) => { return acc + curr; }, 0);

Sanka Sanjeeva · Accepted Answer · 2021-03-16 04:09:28Z

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);

thank you so much! that works too!! its a little complicated for me because are many arrays

Collectives™ on Stack Overflow

filter array into another array

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related