Block duplicates when adding to an array in JavaScript

Question

I am beginner in JavaScript. I have this code:

var imageArray = [];

$(document).on("click", ".showPrv", function () {
    $("#dropzone").each(function () {
        $(".dz-image-preview").each(function () {
            $(".dz-image").each(function () {
                imageArray.push($(this).find("img").attr("src"))
            });
        });
    });
    console.log(imageArray);
})

This code works fine, but I have a problem with duplicates in my array imageArray. How can you block duplicates from being added to this table?

use Set

Yousaf
– Yousaf

2020-07-06 06:38:13 +00:00
Commented Jul 6, 2020 at 6:38 — Yousaf
– Yousaf, Commented Jul 6, 2020 at 6:38

Peter Mortensen · Accepted Answer · 2020-07-11 10:37:30Z

3

Try to use the includes() function.

Using it will be:

...
$(".dz-image").each(function () {
    if(!imageArray.includes($(this).find("img").attr("src")))
        imageArray.push($(this).find("img").attr("src"))
});
...

edited Jul 11, 2020 at 10:37

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jul 6, 2020 at 6:41

Jovylle

1,0098 silver badges21 bronze badges

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

Comments

Tushar · Accepted Answer · 2020-07-06 06:38:22Z

0

You can check if the value exists in the imageArray before pushing a new one, somewhat like this:

   const imgSrc = $(this).find("img").attr("src");
   if(!imageArray.includes(imgSrc)) {
       imageArray.push(imgSrc);
   }

answered Jul 6, 2020 at 6:38

Tushar

6605 silver badges11 bronze badges

Comments

eol · Accepted Answer · 2020-07-06 12:03:50Z

0

I would recommend using a Set for this, as it allows for a quick lookups (O(1)) in order to check if the value already exists. Using an array forces you to do .includes() which takes O(n) time.

const imageSet = new Set();
...
const imgSrcAttr = $(this).find("img").attr("src");
if(!imageSet.has(imgSrcAttr)) {
   imageSet.add(imgSrcAttr);
}
...

If at some point you need to convert the set to an array, you can simply use the spread-operator:

const imageArr = [...imageSet];

edited Jul 6, 2020 at 12:03

answered Jul 6, 2020 at 6:47

eol

24.7k6 gold badges53 silver badges72 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2020-07-11 10:44:09Z

0

If the element was not found, -1 will be returned. Refer to $.inArray():

// If not in your array then
if($.inArray($(this).find("img").attr("src"), imageArray) === -1){

     // Add value to imageArray
     imageArray.push($(this).find("img").attr("src"));
}

Example of $.inArray() on JSFiddle for better understanding.

edited Jul 11, 2020 at 10:44

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jul 6, 2020 at 6:48

Akshay Hegde

17.1k2 gold badges25 silver badges39 bronze badges

Collectives™ on Stack Overflow

Block duplicates when adding to an array in JavaScript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related