Empty elements in JS array declaration
This is my first question here after reading for years, so please be kind to me.
I am having trouble managing an array in js / jq.
I have an array with multiple elements that is processed using the $ .each function. I want to extract matching elements into another array and return that array. But for some reason (don't know if it's related to array declaration, jquery.each function ...) I have the first empty element.
I think I am making it more difficult to understand than this, so I made a jsfiddle.
var arr = new Array();
$.each([1,2,3], function(index,element){
if (element == 2){
arr[index] = element;
}
});
arr should only have 1 element, but arr.length returns 2 because the first slot of the array is empty.
Here is a fiddle http://jsfiddle.net/moay7y95/
I'm sure this is simple and small stupidity, but I couldn't find an answer.
Thanks in advance!
source to share
Better solution: use .filter
var arr = [1, 2, 3].filter(function(value){
return value == 2
});
If the return value is true, the item is included in the returned array; otherwise, it is ignored. This is pure js so you don't need jquery. See Documentation about.filter
Your problem: use .push
Try using a method .push
on an array (see Mozilla documentation ).
var arr = new Array();
$.each([1,2,3], function(index,element){
if (element == 2){
arr.push(element);
}
});
The method .push
will dynamically grow your array as you add items.
Your problem is that the value index
inside the function is the starting point in your original array. This means that if you look at the returned array, you find [undefined, 2]
, and so the length is returned as 2. If your condition was element == 3
, you would have two empty slots.
Alternatively: use .grep
Another jQuery method is $.grep
. See http://api.jquery.com/jquery.grep/
var arr = $.grep([1, 2, 3], function (value) {
return value == 2
});
This is a jQuery javascript implementation .filter
.
source to share
You are pushing an element in an array at 1
st index. Thus, javascript default puts undefined
in 0
th index.
So at the end each
your array will be
[undefined, 2];
This is why you get length
like 2.
You can use push
to add an item to an array:
$.each([1, 2, 3], function (index, element) {
if (element == 2) {
arr.push(element);
elem++;
}
});
Demo: https://jsfiddle.net/tusharj/moay7y95/2/
The push () method adds one or more elements to the end of the array and returns the new length of the array.
Docs: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push
source to share
Your array [1, 2, 3]
has three elements and three associated indices: 0, 1, and 2. At each iteration of the loop $.each()
over this array, the index and its value are passed to the function.
Thus, the first call is received 0, 1
as arguments. The second call receives 1, 2
as its arguments, then the operator condition if
is true, so your code:
arr[index] = element;
actually equivalent to
arr[1] = 2;
Since you are inserting an element at index 1, you will end up with an empty index of 0.
Instead, you can simply use Array.push()
to add an item to the array:
arr.push(element);
source to share
As mentioned, the problem is that you are assigning a value at index 1, so the array will be considered to be length 2.
One solution is to use .push () instead of index based assignment.
Another approach could be to use Array.filter () and return true if the element matches the condition
var arr = [1, 2, 3].filter(function(value){
return value == 2
});
Demo: Fiddle
Using $. grep ()
var arr = $.grep([1, 2, 3], function (value) {
return value == 2
});
source to share
It looks like you are looking for Array.filter (MDN) .
var elems = ["car", "bike"];
var arr = [1, 2, 3, "car", 5, "bike"].filter(myFilterFunc);
function myFilterFunc(val) {
if (elems.indexOf(val) > -1) return true;
}
source to share