javascript includes function within filter function not working?

Question

I have a problem with the javascript filter function.
This is my idea of how it should work.

I need to check if an object is in the fetchedImage array (at first all the images are not in the array because the array is empty).
so we push all images that are new (not in the fetchedImage array) into the queue array.
the second time we check if the objects are in the array, they will be in the array so no images go in the queue array.

my code results show that the queue is keeping to grow without adding new images.
my code:

let images = res.items;
if(images)
{
    // should return items that are not in the array
    let newImages = images.filter(image => {
        return fetchedImages.includes(image) == false; // ps: (image is object)
    })
                
    // add all new images into the queue array
    queue = [].concat(queue, newImages);
}

(I probably did something wrong in the filter function but i cannot fix it)

// ps: (image is object) => if they are not exactly the same objects, meaning the same reference to memory, includes will return false. Example: [{a: 42}].includes({a: 42}) will always be false. — Yoshi
– Yoshi, Commented Aug 4, 2020 at 13:28
@Yoshi Ok thanks, you have any idea how to filter objects in array? — Eric
– Eric, Commented Aug 4, 2020 at 13:31
See n9iels answer. Personally I'd suggest going for a unique property of those images. Maybe they have an id, name, path? — Yoshi
– Yoshi, Commented Aug 4, 2020 at 13:34

n9iels · Accepted Answer · 2020-08-04 13:30:41Z

1

In JavaScript you cannot safely compare two objects. Either use a unique property of the image objects to compare, or see this SO post for other solutions: Object comparison in JavaScript

answered Aug 4, 2020 at 13:30

n9iels

8947 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Eric Over a year ago

Thanks @n9iels, I looked at the other post, but that did not say how to compare an object to an object in the array. i cannot Json.stringify() my object in the array.

n9iels Over a year ago

If you cannot use a property of the image object (would recommend that) you do something like: return fetchedImages.map(i => Json.stringify(i)).includes(Json.stringify(image)).

Eric Over a year ago

that gives the following error: Uncaught (in promise) TypeError: Converting circular structure to JSON --> starting at object with constructor 'q' | property 'firebase_' -> object with constructor 'Object' | property 'apps' -> object with constructor 'Array' --- index 0 closes the circle

n9iels Over a year ago

That means that one of the objects you are trying to stringify has a reference to themselves. See this SO post.

Eric Over a year ago

thanks for the help. i posted the code for people with the same question that worked for me.

Eric · Accepted Answer · 2020-08-04 14:04:10Z

0

if anyone has this same problem. i found a working solution with this specific code:

let newImages = images.filter(image => {
    return fetchedImages.find(fetchedImage => fetchedImage.name == image.name) == undefined
})

just use the find method

answered Aug 4, 2020 at 14:04

Eric

4011 gold badge7 silver badges34 bronze badges

Comments

pgksunilkumar · Accepted Answer · 2023-10-14 09:59:35Z

0

// Convert fetchedImages array to a Set of image names
const fetchedImageNames = new Set(fetchedImages.map(image => image.name));

// Filter images based on whether their names are in the fetchedImageNames Set
const newImages = images.filter(image => !fetchedImageNames.has(image.name));

answered Oct 14, 2023 at 9:59

pgksunilkumar

3962 silver badges6 bronze badges

Collectives™ on Stack Overflow

javascript includes function within filter function not working?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related