I need help to know which elements of the array have been eliminated. I have two arrays, the first array are the updated images of the second array which are images that I have saved in a db:
const images = [
{
_id: 1642907393008,
file: { public_id: 'x5qs5kzb6ib11d43vp8s' },
url: 'blob:http://localhost:3000/ae289396-156b-4809-9522-b237f0423da2',
size: 12772,
format: 'image/webp',
filename: 'omniost.webp',
public_id: 'x5qs5kzb6ib11d43vp8s',
width: 500,
height: 500
},
{
_id: 1642907521656,
file: { public_id: '462u493zytf1o84xnlyu' },
url: 'blob:http://localhost:3000/d1b254f7-2bd7-4106-be58-17a50e74f50f',
size: 18026,
format: 'image/webp',
filename: 'one-pear-meal.webp',
public_id: '462u493zytf1o84xnlyu',
width: 400,
height: 400
},
{
_id: 1642907521697,
file: { public_id: 'bu0j46g0ly779zeoi6ub' },
url: 'blob:http://localhost:3000/a9883b01-3bfa-42ca-812a-21aa4ef9145c',
size: 8716,
format: 'image/webp',
filename: 'one-per-meal-bote.webp',
public_id: 'bu0j46g0ly779zeoi6ub',
width: 400,
height: 400
},
{
_id: 1642907521708,
file: { public_id: '0tw1odc5bjslocsktyrk' },
url: 'blob:http://localhost:3000/44869d64-9cf4-4161-bc5f-95105d6d5e8a',
size: 11534,
format: 'image/webp',
filename: 'optimus.webp',
public_id: '0tw1odc5bjslocsktyrk',
width: 400,
height: 400
},
{
_id: 1642907521727,
file: { public_id: '6yifqfvv93oyy8wgbgq1' },
url: 'blob:http://localhost:3000/480b14de-a9b0-4b9e-8fee-c9de9f6180cc',
size: 20048,
format: 'image/webp',
filename: 'power.webp',
public_id: '6yifqfvv93oyy8wgbgq1',
width: 400,
height: 400
},
{
_id: 1642907521731,
file: { public_id: 'pi152bess3stlv4cfk0p' },
url: 'blob:http://localhost:3000/a9badc1a-df36-4e3b-b2d8-c300c07cedf7',
size: 15076,
format: 'image/webp',
filename: 'probiotic.webp',
public_id: 'pi152bess3stlv4cfk0p',
width: 400,
height: 400
},
{
_id: 1642907521735,
file: { public_id: 'ndr55scq6t22vbs7dlqj' },
url: 'blob:http://localhost:3000/7422d4fd-bf07-422e-b01c-aeda13ce404a',
size: 15088,
format: 'image/webp',
filename: 'starbien.webp',
public_id: 'ndr55scq6t22vbs7dlqj',
width: 400,
height: 400
},
{
_id: 1642907521739,
file: { public_id: 'owhtym9xfygk8uruvzpt' },
url: 'blob:http://localhost:3000/d14ab74a-46a1-4fac-8d03-1443d35971c2',
size: 19034,
format: 'image/webp',
filename: 'super-mix-chocolate.webp',
public_id: 'owhtym9xfygk8uruvzpt',
width: 400,
height: 400
},
{
_id: 1642907521747,
file: { public_id: '3dhlv38pl7mksasx6xln' },
url: 'blob:http://localhost:3000/6a8a74b7-3e3f-40b8-ad97-19e8fc5b7d95',
size: 19556,
format: 'image/webp',
filename: 'super-mix-vainilla.webp',
public_id: '3dhlv38pl7mksasx6xln',
width: 400,
height: 400
},
{
_id: 1642907521752,
file: { public_id: '5nx9b4dkkt0enociurg8' },
url: 'blob:http://localhost:3000/dc5a82d9-2d4f-478a-a324-57c05cd030e9',
size: 16364,
format: 'image/webp',
filename: 'teatino-limon.webp',
public_id: '5nx9b4dkkt0enociurg8',
width: 400,
height: 400
},
{
_id: 1642907521756,
file: { public_id: 'cik34ntt6t9tene7cmoi' },
url: 'blob:http://localhost:3000/03243f34-3a77-45e5-8885-d3561af89e9c',
size: 14776,
format: 'image/webp',
filename: 'teatino-maracuya.webp',
public_id: 'cik34ntt6t9tene7cmoi',
width: 400,
height: 400
},
{
_id: 1642907521759,
file: { public_id: '5ole7w8578qhnj7vnpns' },
url: 'blob:http://localhost:3000/cc6e0bd9-cea9-4caa-8dd0-694166d31bee',
size: 14632,
format: 'image/webp',
filename: 'undu.webp',
public_id: '5ole7w8578qhnj7vnpns',
width: 400,
height: 400
},
{
_id: 1642907521763,
file: { public_id: 'uxm2sj6axllz5ytjafuv' },
url: 'blob:http://localhost:3000/493c41dd-b1a4-4098-a3bc-d0b9e645b4a7',
size: 16572,
format: 'image/webp',
filename: 'uzo.webp',
public_id: 'uxm2sj6axllz5ytjafuv',
width: 400,
height: 400
},
{
_id: 1642907533811,
file: { public_id: 'bplpsk6jy306zt5vk8lu' },
url: 'blob:http://localhost:3000/561ebf7c-3ab2-4961-a74d-fe89a67b656a',
size: 15922,
format: 'image/webp',
filename: 'aqtua.webp',
public_id: 'bplpsk6jy306zt5vk8lu',
width: 300,
height: 300
},
{
_id: 1642907536524,
file: { public_id: 'elr33ooyap1iy7o4gcx2' },
url: 'blob:http://localhost:3000/67316bb2-5e01-4bfb-a977-6247bfbe95e4',
size: 8202,
format: 'image/webp',
filename: 'aloe-beta-bote.webp',
public_id: 'elr33ooyap1iy7o4gcx2',
width: 400,
height: 400
}
]
const lastImages = [
{
_id: '903a045b5c02437b3083b58dc2698525',
size: 12772,
width: 500,
height: 500,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907395/omnilife.products/aloe-beta-bote/x5qs5kzb6ib11d43vp8s.webp',
public_id: 'x5qs5kzb6ib11d43vp8s',
format: 'webp',
filename: 'omniost.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/x5qs5kzb6ib11d43vp8s'
},
{
_id: 'b63cc8337574a83771d3d26438c412c4',
size: 18026,
width: 400,
height: 400,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907544/omnilife.products/aloe-beta-bote/462u493zytf1o84xnlyu.webp',
public_id: '462u493zytf1o84xnlyu',
format: 'webp',
filename: 'one-pear-meal.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/462u493zytf1o84xnlyu'
},
{
_id: '0fac9f1e2260b852d5ec35146476a3c6',
size: 8716,
width: 400,
height: 400,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907545/omnilife.products/aloe-beta-bote/bu0j46g0ly779zeoi6ub.webp',
public_id: 'bu0j46g0ly779zeoi6ub',
format: 'webp',
filename: 'one-per-meal-bote.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/bu0j46g0ly779zeoi6ub'
},
{
_id: '74cb8e581fb9fa9612cc6967483cb1dc',
size: 11534,
width: 400,
height: 400,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907546/omnilife.products/aloe-beta-bote/0tw1odc5bjslocsktyrk.webp',
public_id: '0tw1odc5bjslocsktyrk',
format: 'webp',
filename: 'optimus.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/0tw1odc5bjslocsktyrk'
},
{
_id: 'ababb9f5628ac3bc05c53b7b14daa9d7',
size: 20048,
width: 400,
height: 400,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907547/omnilife.products/aloe-beta-bote/6yifqfvv93oyy8wgbgq1.webp',
public_id: '6yifqfvv93oyy8wgbgq1',
format: 'webp',
filename: 'power.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/6yifqfvv93oyy8wgbgq1'
},
{
_id: '816b6fac1c6e8f0956b1d86cf654de17',
size: 15076,
width: 400,
height: 400,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907549/omnilife.products/aloe-beta-bote/pi152bess3stlv4cfk0p.webp',
public_id: 'pi152bess3stlv4cfk0p',
format: 'webp',
filename: 'probiotic.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/pi152bess3stlv4cfk0p'
},
{
_id: 'd6bd667958f6c33729d288d09691edf9',
size: 15088,
width: 400,
height: 400,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907550/omnilife.products/aloe-beta-bote/ndr55scq6t22vbs7dlqj.webp',
public_id: 'ndr55scq6t22vbs7dlqj',
format: 'webp',
filename: 'starbien.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/ndr55scq6t22vbs7dlqj'
},
{
_id: '86b08809a64b14cc5bebf3600264220c',
size: 19034,
width: 400,
height: 400,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907551/omnilife.products/aloe-beta-bote/owhtym9xfygk8uruvzpt.webp',
public_id: 'owhtym9xfygk8uruvzpt',
format: 'webp',
filename: 'super-mix-chocolate.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/owhtym9xfygk8uruvzpt'
},
{
_id: 'f4478f4fdf0efc2948d66a76f5142104',
size: 19556,
width: 400,
height: 400,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907552/omnilife.products/aloe-beta-bote/3dhlv38pl7mksasx6xln.webp',
public_id: '3dhlv38pl7mksasx6xln',
format: 'webp',
filename: 'super-mix-vainilla.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/3dhlv38pl7mksasx6xln'
},
{
_id: '1f01356c24f9303499c36004b8d01dea',
size: 16364,
width: 400,
height: 400,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907553/omnilife.products/aloe-beta-bote/5nx9b4dkkt0enociurg8.webp',
public_id: '5nx9b4dkkt0enociurg8',
format: 'webp',
filename: 'teatino-limon.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/5nx9b4dkkt0enociurg8'
},
{
_id: '93325e781080b3b0aaa473bee725df36',
size: 14776,
width: 400,
height: 400,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907554/omnilife.products/aloe-beta-bote/cik34ntt6t9tene7cmoi.webp',
public_id: 'cik34ntt6t9tene7cmoi',
format: 'webp',
filename: 'teatino-maracuya.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/cik34ntt6t9tene7cmoi'
},
{
_id: 'd35981c983d3dd9aba58ad51e53d19d2',
size: 14632,
width: 400,
height: 400,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907555/omnilife.products/aloe-beta-bote/5ole7w8578qhnj7vnpns.webp',
public_id: '5ole7w8578qhnj7vnpns',
format: 'webp',
filename: 'undu.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/5ole7w8578qhnj7vnpns'
},
{
_id: 'bdfde2556fc2c9a63145d2ccbd3a4a18',
size: 16572,
width: 400,
height: 400,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907557/omnilife.products/aloe-beta-bote/uxm2sj6axllz5ytjafuv.webp',
public_id: 'uxm2sj6axllz5ytjafuv',
format: 'webp',
filename: 'uzo.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/uxm2sj6axllz5ytjafuv'
},
{
_id: '29bc5c78079ad26d9e5bdb953e4b2bd0',
size: 15922,
width: 300,
height: 300,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907558/omnilife.products/aloe-beta-bote/bplpsk6jy306zt5vk8lu.webp',
public_id: 'bplpsk6jy306zt5vk8lu',
format: 'webp',
filename: 'aqtua.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/bplpsk6jy306zt5vk8lu'
},
{
_id: '3ea163f1d01566cb6dacb774ad49496d',
size: 8202,
width: 400,
height: 400,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907559/omnilife.products/aloe-beta-bote/elr33ooyap1iy7o4gcx2.webp',
public_id: 'elr33ooyap1iy7o4gcx2',
format: 'webp',
filename: 'aloe-beta-bote.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/elr33ooyap1iy7o4gcx2'
},
{
_id: '06275eadb56d99db25c3305fb364215f',
size: 19026,
width: 400,
height: 400,
url: 'https://res.cloudinary.com/emprendimiento-y-salud/image/upload/v1642907560/omnilife.products/aloe-beta-bote/l0x6ahk8667w05hvujpf.webp',
public_id: 'l0x6ahk8667w05hvujpf',
format: 'webp',
filename: 'dolce-vita.webp',
cloudinary_path: 'omnilife.products/aloe-beta-bote/l0x6ahk8667w05hvujpf'
}
]
console.log('[totalImages]', images.length)
console.log('[totalLastImages]', lastImages.length)
const deletedImages = lastImages.filter((lastImage, i) => {
const image = images[i];
if (!image) {
return lastImage.public_id !== image?.public_id
}
})
console.log('[deletedImages]', deletedImages)The total of images in the database is sixteen. In the first array, it is the result of the images that have not been removed, in this example,
‘[deletedImages]’ returns the image with ‘filename’: ‘dolce vita’, which is the item that was deleted.
The problem is, when I dynamically change the ‘images’ array, and delete several elements in different positions, it turns out that it does not give me the images that I delete as a result
Example: from the ‘images’ array, I remove elements 4, 7 and 11, I returns 13 ‘length’ of the array ‘[images]’ which is fine, but when reviewing the elements, it turns out that they are not the ones I deleted, instead of the fourth element, it takes the 2, changes the 7 to 5 and the 11 by 6 from array ‘lastImages’. In a nutshell if it deletes correctly, but when checking the result, the elements are other than the ones I deleted. I hope you have understood the problem, thanks
>Solution :
Just extract all the public_id values of the images array and then filter the lastImages array based on if you find the public_id in this array.
const imagesPublicIds = images.map(image => image.public_id);
const deletedImages = lastImages.filter(lastImage => !imagesPublicIds.includes(lastImage.public_id))