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
CodePudding user response：
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))
CodePudding user response：
It sounds to me that a map will allow you to reference the objects by a key. I think this will give you an easier way to see the differences.
However, assuming you are just trying to figure out the differences between the two arrays and that the 'public_id' uniquely identifies a photo, you simply can do the below:
let deletedImages = images.filter( image => {
let deleted = true
lastImages.forEach( lastImage => {
if (lastImage.public_id === image.public_id) deleted = false
})
return deleted
})
Note that when I ran this code on the data you provided it did not find a file missing, i.e. the second array contained all of the photos in the first array with one additional one.
CodePudding user response：
the two answers are good, I leave another solution to the problem:
const deletedImages = lastImages.filter((lastImage) => {
const image = images.find(img => img.public_id === lastImage.public_id);
if (!image) return lastImage
})