Basically, i'm trying to find an array element within an array object, but it always returning -1.
Here is the code
function myFunction() {
var myArray = [[0,1],[1,1],[1,2]];
var a = myArray .indexOf([0,1]);
document.getElementById("demo").innerHTML = a;
}<p>Click the button to display the position of the element "[0,1]":</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
var myArray = [[0,1],[1,1],[1,2]];
Above line store three array object inside myArray object.
Now you are trying to check the index of a new array on it.
var a = myArray .indexOf([0,1]);//Here [0,1] is the new array object,it has different reference
so it will always return -1.
Just for verification,you can do like below.
function myFunction() {
var a1 = [0,1];
var a2 = [1,1];
var a3 = [1,2];
var myArray = [a1,a2,a3];
var a = myArray.indexOf(a1);
document.getElementById("demo").innerHTML = a;
}<p>Click the button to display the position of the element "[0,1]":</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>it returns 0 ,because here a1 is not new object
myArray needed to be dynamically generated.Strictly comparing objects is false because no two objects are the same. You could convert each array within the array to a string using join() and split(). Then use indexOf to instead find "0,1".
[0,1] === [0,1] // false
"0,1" === "0,1" // true
The goal: ["0,1","1,1","1,2"].indexOf("0,1") which is the intended use of indexOf()
var needle = [0,1].join(); // or "0,1"
var haystack = [ [0,1],[1,1],[1,2] ];
var index = haystack.join('-').split('-').indexOf(needle);
document.getElementById("demo").innerHTML = index ; <p id="demo"></p>.join('-') produces "0,1-1,1-1,2"
.split('-') produces ["0,1", "1,1", "1,2"]
.indexOf("0,1") produces 0
var needle = [0,1];
var haystack = [["0,1"],["1,1"],["1,2"]];
var index = getIndex(needle, haystack) // returns 0
function getIndex(needle, haystack) {
return haystack.join('-').split('-').indexOf( needle.join() );
}
if(getIndex([0,1], haystack) && getIndex([1,2], haystack)) You can easily make a function that loops through multiple parameters. I'm not going to reduce the integrity of the answer though because I spent a good amount of time making it the best I could for the question at hand. :)It has to do with how javascript compares objects. Copying from MDN:
Note that an object is converted into a primitive if, and only if, its comparand is a primitive. If both operands are objects, they're compared as objects, and the equality test is true only if both refer the same object.
(Don't forget that JS Array are technically Object). You can even see this pretty trivially in the browser (assuming you have some sort of dev tools available to you):
[0, 1] == [0, 1]; # false -- They're different objects even though they have the same values.
but this works because they're the same objects:
a = [0, 1];
a == a; # true
The problem is that .indexOf() uses a strict equality comparison ===. In case of arrays and objects it will never be true unless they're the same instance, you can see that:
[0,1] === [0,1] //Returns false
Reference MDN docs on Comparison
So, you'd have to iterate the array to find the equality index. Something like:
function myFunction() {
var myArray = [[0,1],[1,1],[1,2]];
var a = -1;
var find = [0,1];
var idx = 0;
myArray.map(function(item) {
var valid = true;
for(var i=0; i<item.length; i++) {
if(item[i] !== find[i])
valid = false;
}
if(valid)
a = idx;
idx++;
});
document.getElementById("demo").innerHTML = a;
}<p>Click the button to display the position of the element "[0,1]":</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>