javascript array push problem

Question

I have the following javascript code:

var objectArray = [];
var allInputObjects = [];
var allSelectObjects = [];
var allTextAreaObjects = [];

//following returns 3 objects
allInputObjects = document.getElementById("divPage0").getElementsByTagName("INPUT");

//following returns 1 object
allSelectObjects = document.getElementById("divPage1").getElementsByTagName("SELECT");

//following returns 0 objects
allTextAreaObjects = document.getElementById("divPage2").getElementsByTagName("TEXTAREA");

//and following statement does not work
objectArray = allInputObjects.concat(allSelectObjects);

And my problem is that the last line is throwing an error.

I tried the above code in Firefox and it says allInputObjects.concat is not a function.

Any clues, I believe the script is not treating allInputObjects as an Array!

Any help will be appreciated.

pimvdb · Accepted Answer · 2011-07-18 09:51:55Z

4

getElementsByTagName returns a NodeList, which is similar to an Array except that it does not support all those prototype functions.

To seamlessly convert such an array-like object into an Array, use:

var arr = Array.prototype.slice.call(somenodelist, 0);

arr will almost be identical, except that it now has the Array prototype functions supported, like concat.

What the function actually does is returning a partial Array containing the elements of somenodelist, to be precise everything from index 0 and after. Obviously, this are just all elements, therefore this is a trick to convert array-like objects into real Arrays.

edited Jul 18, 2011 at 9:51

answered Jul 18, 2011 at 9:46

pimvdb

155k80 gold badges313 silver badges357 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrzej Doyle Over a year ago

+1 since this contains an actual solution to the problem (converting the NodeList back to an array).

RobG Over a year ago

You can't expect host objects to behave when passed to native ECMAScript functions. In this case, IE < 9 (at least) will fail.

pimvdb Over a year ago

@RobG: Really? I believe jQuery also utilizes this function in it .toArray function.

Andrzej Doyle · Accepted Answer · 2011-07-18 09:43:00Z

4

Why do you think that allSelectObjects is an array?

It is initially assigned to an empty array, sure. But then it's overwritten by the getElementsByTagName call on line 6(ish). Variables in Javascript are not strongly typed, so the initial assignment does not force later assignments to also be arrays.

I suspect you'll have some type of NodeList or similar, rather than an array, in the variable when you invoke the final line. (That's what's returned by the method in Firefox, at least.)

answered Jul 18, 2011 at 9:43

Andrzej Doyle

104k33 gold badges191 silver badges231 bronze badges

Comments

Jamie Dixon · Accepted Answer · 2011-07-18 09:44:17Z

3

As Andezej has pointed out, you're not dealing with an array here, you're dealing with a kind of node list.

Here's one way you can create an array to work with based on the result of getElementsByTagName

        var tags = obj.getElementsByTagName('input');
        for (var j=0;j<tags.length;j++) {
            resultArray.push(tags[j]);
        }

answered Jul 18, 2011 at 9:44

Jamie Dixon

54.1k21 gold badges131 silver badges168 bronze badges

Comments

KooiInc · Accepted Answer · 2011-07-18 11:14:50Z

1

Just another funny way to convert your NodeList to an array:

var tags = obj.getElementsByTagName('input'),
    tags2Arr = ( 
           function toArr(i){
             return i ? toArr(i-1).concat(tags[i]) : [tags[0]];
           }(tags.length-1) 
    );

Now if you add a method to the Array.prototype:

Array.prototype.clone = function() {
    var arr = this;
    return (function clone(i){
     return i ? clone(i-1).concat(arr[i]) : [arr[0]];
    })(this.length-1);
};

You can convert a NodeList to an array, using this oneliner:

Array.prototype.clone.call(obj.getElementsByTagName('input'));

edited Jul 18, 2011 at 11:14

answered Jul 18, 2011 at 10:52

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Collectives™ on Stack Overflow

javascript array push problem

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related