jQuery each array

Question

analyse : function (that) {

        var a = new Array();
        var x = 0;

        $(that).children("li").each(function(){
            console.log('test1');
            a[x]['name'] = 'f'; 
            a[x]['link'] = 'UUUUUUUUUUU';
            console.log('test2');
            x++;
        })

        return a;
    }

I'm trying to create an array to store the hierarchy from my menu for PHP later on.

The console won't show me "test2", what did I do wrong?

Transformed into this with Didier G's Help:

analyse : function (that) {
        return $(that).children('li').map(function() {
            var b = {
                name: $(this).children('a').text(), 
                link: $(this).children('a').attr('href')
            };
            if ($(this).children('ul').size() > 0) {
               b.childs =  mcms.module.analyse($(this).children('ul'));
            } 
            return b;
        });
    }

So if i say var y = analyse('#menu'); I get the whole bunch! ^^

Is it giving you an error in the console? It seems like a[x] is not defined so you're trying to assign a property 'name' to an undefined variable. — Ben L
– Ben L, Commented Nov 27, 2011 at 11:20
new Array() is perfectly fine per the ECMAScript Language Specification and its implementations, but [] is shorter and its reduced compatibility is hardly relevant today. — PointedEars
– PointedEars, Commented Nov 27, 2011 at 11:37

Didier Ghys · Accepted Answer · 2011-12-20 10:49:01Z

9

'a[x]' is undefined at that moment. You have to first build an object and assign it to 'i' position ('x' is indeed a not standard name for an iterator, thanks @Cito):

var a = new Array();
var i = 0;

$(that).children("li").each(function(){
        console.log('test1');
        a[i] = { name: 'f', link: 'UUUU' };
        console.log('test2');
        i++;
});

Note: your code misses a ; after the each(). Even though it is valid javascript to omit semi-colons, it is I think better to explicitly use them to avoid misinterpretations.

Creating array can be achieve by using .map()

var a = [];

// .map() returns a jquery array, to obtain a pure javascript array, you must call .toArray() afterwards
a = $(that).children('li').map(function() {
    return { name: 'f', link: 'UUUU' };
}).toArray();

Here's a jsfiddle to illustrate

This article covers a the use of .each() and .map() for building data collections out of lists in jquery.

edited Dec 20, 2011 at 10:49

answered Nov 27, 2011 at 11:17

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

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

4 Comments

Cito Over a year ago

Also, x is a poor name for an array index, and the each() method already passes an array index to your function so you don't need to maintain your own variable for that. But Didier is right, map() is the better solution anyway.

Sem Over a year ago

I totally understand now this is great!!

PointedEars Over a year ago

Correct is: There is no object yet to have a property name. BTW, b is unnecessary. Also, these languages are dynamic, so properties can be added at any time using the property accessor syntax as the OP did (provided the object permits it). Your toArray(…) does nothing useful until the return value is assigned to a.

PointedEars Over a year ago

Initialization a = [] is pointless here. These languages are loosely typed. If you must, write var a = ….toArray();.

ThiefMaster · Accepted Answer · 2011-11-27 11:19:37Z

1

a is empty, you are trying to set properties to an undefined object. Use this code instead:

    var a = [];
    $(that).children("li").each(function(x){
        console.log('test1');
        a[x] = {};
        a[x].name = 'f'; 
        a[x].link = 'UUUUUUUUUUU';
        console.log('test2');
    })

    return a;

Even shorter would be this code (inside the callback):

a[x] = {name: 'f', link: 'UUUUUUUUUUU'};

answered Nov 27, 2011 at 11:19

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

Comments

crivers · Accepted Answer · 2012-06-01 17:42:29Z

SOLUTION: I had a similar scenario and was able to come up with a clean solution. I basically had a to make question object with several questions in them with individual properties.

Here was my solution:

$("li").each(function(i,e){
// Build Array
questionOb[i] = {
    'questionSeq' : i, 
    'questionType' : $(this).find(".questionType").attr("rel"), 
    'questionLabel' : $(this).find(".questionLabel").attr("rel"), 
    'questionAnswers' : $(this).find(".questionAnswers").attr("rel"), 
    'questionMinimum' : $(this).find(".questionMinimum").attr("rel"), 
    'questionMaximum' : $(this).find(".questionMaximum").attr("rel"), 
    'questionInterval' : $(this).find(".questionInterval").attr("rel"), 
};
});

var dataString = {
    questionsSet : questionOb
};

This essential makes an array of questions for each "li" it finds. The data ends up looking something like this:

Array
(
    [questions] => Array
        (
            [0] => Array
                (
                    [questionSeq] => 0
                    [questionType] => email
                    [questionLabel] => Please enter your question here.
                    [questionRandom] => no
                    [questionRequired] => no
                )

            [1] => Array
                (
                    [questionSeq] => 1
                    [questionType] => numeric
                    [questionLabel] => Please enter your question here.
                    [questionRandom] => no
                    [questionRequired] => no
                )

            [2] => Array
                (
                    [questionSeq] => 2
                    [questionType] => singleselect
                    [questionLabel] => Please enter your question here.
                    [questionAnswers] => 
                    [questionRandom] => no
                    [questionRequired] => no
                )

        )

)

orip · Accepted Answer · 2011-11-27 11:19:26Z

0

a[x] = {name: 'f', link: 'UUUUUUUUUUU'};

answered Nov 27, 2011 at 11:19

orip

76k21 gold badges120 silver badges150 bronze badges

Comments

PointedEars · Accepted Answer · 2011-11-27 11:29:29Z

0

You have forgotten

a[x] = {};

to make the element at index x (a reference to) an object that can have a properties p to be added with

a[x][p] = …;

You should not use each(…), it is very inefficient by comparison to a for loop.

edited Nov 27, 2011 at 11:29

answered Nov 27, 2011 at 11:17

PointedEars

15k4 gold badges36 silver badges33 bronze badges

1 Comment

Didier Ghys Over a year ago

.each()or .map() should be used wisely is more correct than you should not use. For large collections (1000+), it's more efficient to use pure javascript, otherwise, the gain is pretty trivial.

Collectives™ on Stack Overflow

jQuery each array

5 Answers 5

4 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related