JS includes() returning partial matches

I have a string of numbers which we are comparing to ids in a JSON file with javascript to create a list of favorites. I am using includes() to test if the tourid in the JSON file is also in the string.

The issue shows up with larger numbers in the array. If the list contains 34, then the output shows only the details for tourid 34, but if 134 is in the list, then the output shows both tourid 34 and 134. I have also tried indexOf() with similar results.

Is there a way to force includes() to only go with exact matches?

The script is below (and yes it is in a worker script hence the postMessage ending):

function getMyLst(mylst) {
// build nav list based on myList array
// check if mylst is empty of numbers
if (mylst === '') {
let myLstStr = 'rmvml|0';
postMessage(myLstStr);
}
else {
let xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var myLstStr = 'mylst|';
var lstCnt = 0;
var daLst = '';
var clipList = '';
data = JSON.parse(this.responseText);
// loop through check if in mylst then build string
for (let i = 0; i < data.length; i++) {
if (mylst.includes(data[i].tourid)) {
myLstStr += '<a href="'+data[i].url+'">'+data[i].tourname+'</a><br>';
lstCnt++;
daLst += (data[i].tourid)+',';
clipList += data[i].tourname+' - '+data[i].url+'\n';
}
}
myLstStr += '|'+lstCnt+'|'+daLst.slice(0, -1)+'|'+clipList;
postMessage(myLstStr);
} 
};
xmlhttp.open("GET", dturl, true);
xmlhttp.send();
}
}

The worker onmessage function, with the value of mylst as sent to the worker as a comma separated string: mylst|146,57,134

onmessage = function (e) {
// Determine worker function from first variable
// strip first value before "|"
let msg = e.data[0];
var val = msg.split('|');
// GO get myList data
if (val[0] === 'mylst') {
var mylst = val[1] ;
getMyLst(mylst);
}
// end myList section

The above issue that you are facing is occurring because the includes() method in JavaScript searches for the substring in the string, which means it will find matches not only for exact matches but also for partial matches.

To make includes() for only to search for exact matches, you can update your code to compare the values using the === operator instead.

Replace the line if(mylst.includes(data[i].tourid)) with
if(mylst.split(',').includes(data[i].tourid.toString())) and it will ensure a exact match between values. Here, split() is used to convert the comma-separated string to an array, and toString() is used to ensure a string comparison.

solution:

function getMyLst(mylst) {
// create nav list based on myList array
// here check if mylst is empty of numbers
if (mylst === '') {
let myLstStr = 'rmvml|0';
postMessage(myLstStr);
}
else {
let xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var myLstStr = 'mylst|';
var lstCnt = 0;
var daLst = '';
var clipList = '';
data = JSON.parse(this.responseText);
// loop through check if in mylst then build string
for (let i = 0; i < data.length; i++) {
if (mylst.split(',').includes(data[i].tourid.toString())) {
myLstStr += '<a href="'+data[i].url+'">'+data[i].tourname+'</a><br>';
lstCnt++;
daLst += (data[i].tourid)+',';
clipList += data[i].tourname+' - '+data[i].url+'\n';
}
}
myLstStr += '|'+lstCnt+'|'+daLst.slice(0, -1)+'|'+clipList;
postMessage(myLstStr);
} 
};
xmlhttp.open("GET", dturl, true);
xmlhttp.send();

}
}

I hope this work fine for you and if its not kindly let me know

use string.search() method instead

it can differ the 34 from 134 and find only the unique also accept the regexp

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const sampledata = [
{
id:34
},
{
id:134
},
{
id:234
}
];
let mylst = '146,57,134,34';
for (let i = 0; i < sampledata.length; i++) {
const includes = mylst.search(sampledata[i].id)>0?true:false;
if (includes) {
//do something
console.log('I am in',sampledata[i].id)
}else{
console.log('I am not present',sampledata[i].id)
}
}

<!-- end snippet -->