Having a problem with JavaScript when using the Array.includes() method to test for duplicate items

Question

Having a problem with JavaScript when using the Array.includes() method to test for duplicate items

Utilizing an input connected to an API, I can retrieve a list of cities based on the entered letters. The API is triggered with each keyup event in this manner:

let ville_input = document.getElementById("search_immobilier_ville");
let ville_arr = [];

ville_input.addEventListener("keyup", () => {
  res_list.innerHTML = "";

  fetch("https://api.fr/communes?nom=" + ville_input.value)
    .then(res => {
      return res.json();
    })
    .then(data => {
      data.forEach(el => {
        if (
          el.codeDepartement == "971" &&
          el.nom
            .toUpperCase()
            .startsWith(ville_input.value.toUpperCase().trim())
        ) {
          if (!ville_arr.includes([el.nom, el.codesPostaux[0]])) {
            ville_arr.push([el.nom, el.codesPostaux[0]]);
            console.log(ville_arr);
          }
        }
      });
    })
    .catch(err => {
      // Performing actions
    });
});

To store the results as arrays within another array, my first approach is to push them like so:

ville_arr.push([el.nom, el.codesPostaux[0]])

The problem arises when duplicate items are added to the array due to repetitive API calls fetching the same results. To avoid this issue, I implemented the following check:

if(!ville_arr.includes([el.nom, el.codesPostaux[0]])){

    ville_arr.push([el.nom, el.codesPostaux[0]])
    console.log(ville_arr)

      }

Despite these adjustments, duplicates still persist in the final array. Could it be related to the unique indexes or something else entirely?

https://i.sstatic.net/TxUtm.png

javascript arrays ajax fetch

Answer 1

Answer №1

Array.prototype.includes performs a referential equality check for objects.

This implies that even if you are adding objects with the same structure, they are not considered identical references as each addition creates a new object.

A common approach is to retain a unique identifier of an object instead, like an id.

Perhaps considering storing and checking for the zipcode could be beneficial?

if (!zipcodes.includes(el.codesPostaux[0])) {
  zipcodes.push(el.codesPostaux[0]);
  ville_arr.push([el.nom, el.codesPostaux[0]]);
}

An efficient method is utilizing a set of zipcodes rather than an array (due to the O(1) lookup time):

if (!zipcodesSet.has(el.codesPostaux[0])) {
  zipcodesSet.add(el.codesPostaux[0]);
  ville_arr.push([el.nom, el.codesPostaux[0]]);
}

If opting to solely use ville_arr, achieving the same outcome can also be accomplished using Array.prototype.every (or Array.prototype.some):

// this will return true if every location in ville_arr
// doesn't have the received zipcode
if (ville_arr.every(([, zipcode]) => zipcode !== el.codesPostaux[0])) {
  ville_arr.push([el.nom, el.codesPostaux[0]]);
}

Another option could involve applying JSON.stringify to your object to generate a consistent string representation of a specific object. This approach could work since includes conducts an equality comparison for primitive values such as strings.

Answer 2

Array.prototype.includes performs a referential equality check for objects.

This implies that even if you are adding objects with the same structure, they are not considered identical references as each addition creates a new object.

A common approach is to retain a unique identifier of an object instead, like an id.

Perhaps considering storing and checking for the zipcode could be beneficial?

if (!zipcodes.includes(el.codesPostaux[0])) {
  zipcodes.push(el.codesPostaux[0]);
  ville_arr.push([el.nom, el.codesPostaux[0]]);
}

An efficient method is utilizing a set of zipcodes rather than an array (due to the O(1) lookup time):

if (!zipcodesSet.has(el.codesPostaux[0])) {
  zipcodesSet.add(el.codesPostaux[0]);
  ville_arr.push([el.nom, el.codesPostaux[0]]);
}

If opting to solely use ville_arr, achieving the same outcome can also be accomplished using Array.prototype.every (or Array.prototype.some):

// this will return true if every location in ville_arr
// doesn't have the received zipcode
if (ville_arr.every(([, zipcode]) => zipcode !== el.codesPostaux[0])) {
  ville_arr.push([el.nom, el.codesPostaux[0]]);
}

Another option could involve applying JSON.stringify to your object to generate a consistent string representation of a specific object. This approach could work since includes conducts an equality comparison for primitive values such as strings.

Answer 3

Answer №2

Check out this solution:

const city_input = document.getElementById('search_real_estate_city');
let city_array = [];
city_input.addEventListener('keyup', () => {
    result_list.innerHTML = '';

    fetch(`https://api.fr/communes?nom=${city_input.value}`)
        .then(res => {

            // Clear old data when receiving new response
            city_array = [];

            return res.json();
        })
        .then(...)
        .catch(...);
});

You can also try using Array.prototype.find() (and additional information about find vs some on jsPerf.com):

if(!city_array.find(i => i[1] === el.postalCodes[0])) {

    city_array.push([el.name, el.postalCodes[0]]);
    console.log(city_array);
}

Answer 4

Check out this solution:

const city_input = document.getElementById('search_real_estate_city');
let city_array = [];
city_input.addEventListener('keyup', () => {
    result_list.innerHTML = '';

    fetch(`https://api.fr/communes?nom=${city_input.value}`)
        .then(res => {

            // Clear old data when receiving new response
            city_array = [];

            return res.json();
        })
        .then(...)
        .catch(...);
});

You can also try using Array.prototype.find() (and additional information about find vs some on jsPerf.com):

if(!city_array.find(i => i[1] === el.postalCodes[0])) {

    city_array.push([el.name, el.postalCodes[0]]);
    console.log(city_array);
}

Answer 5

Answer №3

Array#includes does not check reference types based on their values; it verifies if their references are identical.

For instance, running this code will result in false:

var myArr = [[5, 6], [1, 2], [4, 5]];

console.log(myArr.includes([1, 2])); // false

This is because the array [1, 2] declared in line 1 is a different entity from the one in line 3, despite having the same values.

To address this issue, you can utilize Array#some, which takes a lambda function as input:

var myArr = [[5, 6], [1, 2], [4, 5]];

console.log(myArr.some(e => e[0] === 1 && e[1] === 2)); // true

Or applying this concept to your specific scenario:

if(!ville_arr.some(e => e[0] === el.nom && e[1] === el.codesPostaux[0])) {
    ville_arr.push([el.nom,el.codesPostaux[0]])
    console.log(ville_arr)
}

Answer 6

Array#includes does not check reference types based on their values; it verifies if their references are identical.

For instance, running this code will result in false:

var myArr = [[5, 6], [1, 2], [4, 5]];

console.log(myArr.includes([1, 2])); // false

This is because the array [1, 2] declared in line 1 is a different entity from the one in line 3, despite having the same values.

To address this issue, you can utilize Array#some, which takes a lambda function as input:

var myArr = [[5, 6], [1, 2], [4, 5]];

console.log(myArr.some(e => e[0] === 1 && e[1] === 2)); // true

Or applying this concept to your specific scenario:

if(!ville_arr.some(e => e[0] === el.nom && e[1] === el.codesPostaux[0])) {
    ville_arr.push([el.nom,el.codesPostaux[0]])
    console.log(ville_arr)
}

Answer 7

Answer №4

One unconventional method of achieving the same result is by creating an object (o) and populating it with sub-arrays using unique keys derived from the contents of each array. This approach allows the object to maintain its distinct structure independently:

var o={data:{},insert:function(name,code){this.data[name+code]=[name,code]},
get:function(){return Object.values(this.data)}};

To add values, you would use:

o.insert(element.name, element.postCode[0]);

To access the unique arrays stored in the object, you can utilize:

o.get()

Answer 8

One unconventional method of achieving the same result is by creating an object (o) and populating it with sub-arrays using unique keys derived from the contents of each array. This approach allows the object to maintain its distinct structure independently:

var o={data:{},insert:function(name,code){this.data[name+code]=[name,code]},
get:function(){return Object.values(this.data)}};

To add values, you would use:

o.insert(element.name, element.postCode[0]);

To access the unique arrays stored in the object, you can utilize:

o.get()

Having a problem with JavaScript when using the Array.includes() method to test for duplicate items

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible to trigger an ng-click event while the md-backdrop is present in Angular Material?

Displaying an image on canvas while showing a loading progress bar

Error code 400 encountered when processing Stripe webhooks

No response being received from Ajax request

Converting Python code into JavaScript for use on an iPhone device

Extensions fail to load on subsequent attempts in Forge Viewer

PHP encountered an error decrypting the JSON data it received from JavaScript

How do the JavaScript thread and the Silverlight UI thread interact with each other?

When attempting to display a basic mesh in Three.js, the render does not showcase a simple cube as expected

Encountering a problem with npm reading dependencies

Show button once modal has been closed

I desire to exclude the final attribute of the object and instead assign its value to the preceding property

What causes an error when jqXHR.abort() is invoked in the beforeSend function?

Retrieve latitude and longitude values from a string of varying length

Steps to Turn Off Automatic Loading in Jquery Ajax tabs

Storing a photo taken with a camera to a local directory on the computer

Challenges in displaying a preview of the cart following a successful ajax request

Exploring the process of updating initialState within react-redux

Obtain the result of two "Synchronous" nested queries using Express and Mongoose

Tips for choosing or unselecting a row within a Table utilizing the Data Grid Mui