Mike Mike - 2 months ago 10
jQuery Question

jQuery inArray and Javascript IndexOf returning partial matches. I need to check against a full match

I have an array that contains objects. I am trying to find out if an ID is missing from that array. The code I am using is returning partial matches such as allowing "1" to match "10", "11", "12","13" and so on. This occurs if I iterate as a string or I convert both the search term and the id as a number. For example this code:

var loadUserTemplate = function(json){
var firstArray = json[0];
var parsed = (JSON.parse(firstArray));
var gridStack = $('.grid-stack-item');
var plength = parsed.length;

gridStack.each(function(index){
var gridstackId = Number($(this).attr('data-custom-id'));

for(var j=0; j < plength; j++){
var doesNotContain = Number(parsed[j].id.indexOf(gridstackId));
console.log(typeof doesNotContain);
if(doesNotContain === -1){
console.log(gridstackId + " is not in " + parsed[j].id);
}
}
}


Generates this in the console.log (I am only including the first number, notice how it finds 1 in 10 - 19):

number
1 is not in 2
number
1 is not in 3
number
1 is not in 4
number
1 is not in 5
number
1 is not in 6
number
1 is not in 8
number
1 is not in 9
number
1 is not in 20
number
1 is not in 22
number
1 is not in 23
number
1 is not in 24
number
1 is not in 25
number
1 is not in 26


I have tried jQuery(inArray) and indexOf with the same results. How do I find full matches, and not partial matches?

Update: parsed is firstArray parsed which is:

[{"x":"0","y":"0","width":"12","height":"5","id":"1"},{"x":"0","y":"5","width":"6","height":"2","id":"2"},{"x":"6","y":"5","width":"6","height":"2","id":"3"},{"x":"0","y":"7","width":"6","height":"2","id":"4"},{"x":"6","y":"7","width":"6","height":"2","id":"5"},{"x":"0","y":"9","width":"12","height":"8","id":"6"},{"x":"0","y":"17","width":"4","height":"6","id":"8"},{"x":"4","y":"17","width":"4","height":"6","id":"9"},{"x":"8","y":"17","width":"4","height":"6","id":"10"},{"x":"0","y":"23","width":"4","height":"6","id":"11"},{"x":"4","y":"23","width":"4","height":"6","id":"12"},{"x":"8","y":"23","width":"4","height":"6","id":"13"},{"x":"0","y":"29","width":"6","height":"8","id":"14"},{"x":"6","y":"29","width":"6","height":"8","id":"15"},{"x":"0","y":"37","width":"4","height":"6","id":"16"},{"x":"4","y":"37","width":"4","height":"6","id":"17"},{"x":"8","y":"51","width":"4","height":"6","id":"18"},{"x":"0","y":"43","width":"4","height":"6","id":"19"},{"x":"4","y":"51","width":"4","height":"6","id":"20"},{"x":"8","y":"57","width":"4","height":"6","id":"21"},{"x":"0","y":"57","width":"6","height":"8","id":"22"},{"x":"6","y":"63","width":"6","height":"8","id":"23"},{"x":"0","y":"65","width":"6","height":"8","id":"24"},{"x":"6","y":"71","width":"6","height":"8","id":"25"},{"x":"0","y":"79","width":"12","height":"10","id":"26"}]


gridstackId is the data-custom-id tag of the elements on the DOM.

Answer

The value of parsed[j].id is a string, so parsed[j].id.indexOf(gridstackId) checks whether the value of gridstackId is contained in parsed[j].id (the value of gridstackId is converted to a string in the process as well).

If you want to check for equality you should use the comparison operator instead: ===.

Since gridstackId is a number, you have to convert parsed[j].id to a number as well:

Number(parsed[j].id) === gridstackId

Alternatively, do not convert $(this).attr('data-custom-id') to a number, keep it as a string:

var gridstackId = $(this).attr('data-custom-id');
// ...
parsed[j].id === gridstackId;

To solve your problem though, namely checking whether an object with such an ID exists, you can use Array#some:

var gridstackId = $(this).attr('data-custom-id');
var exists = parsed.some(function(obj) {
  return obj.id === gridstackId;
});

exists will be true if there is at least one object for which the condition (ID equality) is fulfilled.

Comments