I have a list of products like:

listOfProducts = [{name: "prod1", productId: 1}, {name:"prod2", productId: 2},.....]

If I choose a product i'll populate the array

listSelectedProducts

it will contains the choosen products.

And I make a post to save my choise.

Now If I go back in the products page, i'll have an array:

oldProductsArray

which contains the products that I have saved in db.

listSelectedProducts

with my selected products.

Now If I remove the selected product to choose another one, my oldProductsArray will have the first product, but listSelectedProducts will have the new product choose.

So now I should remove from my db the product that I don't want anymore (an it is in oldProductsArray). So I thought to compare (and there I have my problem) the two arrays and if elements in oldProductsArray are not in listSelectedProducts, i'll create a new array with the products not selected to delete them.

So let's do an example:

I'm in my products page and choose a product.

So listSelectedProducts = [{name: "prod1", productId: 1}]

and I will post in db.

I return in products page and this time I have:

listSelectedProducts = [{name: "prod1", productId: 1}]
oldProductsArray = [{name: "prod1", productId: 1}]

I deselect the product: prod1 and choose the product: prod2

So I have:

listSelectedProducts = [{name: "prod2", productId: 2}]
oldProductsArray = [{name: "prod1", productId: 1}]

and now I should check if products in oldProductsArray are also in listSelectedProducts, if they are I can do the post, if they are not (like in this case) I should remove from db the product.

So I have a function:

this.checkOldProduct(oldProductsArray, listSelectedProducts)

in this function:

checkOldProduct(oldProductsArray, listSelectedProducts){
let arrayProductToDelete = []
// i have tried like this, but it doesn't work properly.
listSelectedProducts.filter(p1 => !oldProducts.some(p2 => { p1.productId === p2.productId, arrayProductToDelete.push(p2) }));
}

I hope I have expressed myself well, in any case I am ready to add clarifications. thank you

CodePudding user response：

some quick consideration first:

1. If that's really all the data you have for the product list, you should probably just use a PUT method on your API and simply replace the whole list without having to compute the difference
2. If you still somehow need to make separate operations to update products list, I guess you should make POST requests to add new items, DELETE requests to delete items and PATCH requests to update single items (like same id but different quantities?)
3. From the point above: do you also have quantities for items?

Question Specific Answer

So based solely on your question I think easiest way is to find the list of items to delete something like this:

const removedItems = oldArray.filter((old) => !newArray.find((_new) => old.id === _new.id));

And request their deletion.

Full Diff Answer

If you want to compute a full diff of your chart items so you can make multiple update requests, you could do something like this:

function arrayDiff(oldArray, newArray) {
  const addedAndUpdatedItems = newArray.reduce((diff, item, index, array) => {
    const oldItem = oldArray.find((old) => old.id === item.id);
    if(!oldItem) {
      diff.added.push(item);
    } else if(oldItem.quantity !== item.quantity) {
      diff.updated.push(item);
    }
    return diff;
  }, {
    added: [],
    updated: []
  });
  const removedItems = oldArray.filter((old) => !newArray.find((_new) => old.id === _new.id));
  return {
    ...addedAndUpdatedItems,
    removed: removedItems
  }
}

const oldArray = [{ name: "prod1", id: 1, quantity: 1 }, { name: "prod3", id: 3, quantity: 4 }];
const newArray = [{ name: "prod1", id: 1, quantity: 3 }, { name: "prod2", id: 2, quantity: 3 }];

const diff = arrayDiff(oldArray, newArray);

console.log({ diff });

Output is

{
    "added": [
        {
            "name": "prod2",
            "id": 2,
            "quantity": 3
        }
    ],
    "updated": [
        {
            "name": "prod1",
            "id": 1,
            "quantity": 3
        }
    ],
    "removed": [
        {
            "name": "prod3",
            "id": 3,
            "quantity": 4
        }
    ]
}

CodePudding user response：

If you want do find matching objects in both array using their productId,

Here is my solution

First get the productId list from one array then you can easily filter the another array using includes() method

let listSelectedProducts = [{name: "prod2", productId: 1}, {name: "prod2", productId: 2}, {name: "prod2", productId: 3}]
let oldProductsArray = [{name: "prod1", productId: 1}, {name: "prod1", productId: 2}]
let oldIds = oldProductsArray.map(d=>d.productId)
let arrayProductToDelete = listSelectedProducts.filter(d=>oldIds.includes(d.productId))
console.log(arrayProductToDelete)