javascript array loop create element

Question

I am trying to create li elements based on the number of values in array. Basically, for every key in an array an li element needs to be created.

<ul class="alpharow">
</ul>
    $(".alpharow").each(function() {

    var alpha = new Array();
        alpha['this'] = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
        alpha['that'] = ['l', 'm', 'n', 'o', 'p', 'q', 'r'];
     var n = alpha.length;

        for (i = 0; i < n; i++) {
            //$("li:eq(" + i + ")");

           var li_tag = '<li class="alpha_li"></li>';
        }

        $(".alpharow").append(li_tag);

        //$("span").text("There are " + n + " kys.");

    });

So, a, b, c etc...would all have their own <li>

Thanks for the help, let me know if something is not clear.

I suggest stepping back and reading some good tutorials or books on JavaScript. I found JavaScript: The Definitive Guide by David Flanagan quite good. — T.J. Crowder
– T.J. Crowder, Commented Dec 16, 2011 at 10:02

Samich · Accepted Answer · 2011-12-16 10:06:48Z

2

You have array of arrays. If you need to create LIs for all of them use such sample:

$(".alpharow").each(function() {

    var alpha = new Array();
    alpha['this'] = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    alpha['that'] = ['l', 'm', 'n', 'o', 'p', 'q', 'r'];

    // go thru the main array
    for (var key in alpha) {
        // go thru the inner arrays
        var arr = alpha[key];
        for (i = 0, n = arr.length; i < n; i++) {
            //apped LI's
            $(".alpharow").append($('<li></li>', { class: 'alpha_li', text: arr[i] }));
        }
    }       
});

Code: http://jsfiddle.net/m8vwz/1/

answered Dec 16, 2011 at 10:06

Samich

30.4k6 gold badges70 silver badges80 bronze badges

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

Comments

T.J. Crowder · Accepted Answer · 2011-12-16 09:58:21Z

1

A couple of issues there:

This code in the loop serves no purpose: $("li:eq(" + i + ")");
Move your $(".alpharow").append(li_tag); into the loop (but don't do the lookup each time, cache the result of $(".alpharow") in a variable at the top, before calling each, and then reuse it).
Your alpha is an Array to which you're adding no elements. (Array elements in JavaScript terminology are properties in the array object with names consisting entirely of numerals.) You're adding a couple of properties to it, but they're not elements, so length will be 0.
The values of the two properties you have added are each arrays, so you need to loop through them.

answered Dec 16, 2011 at 9:58

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Comments

Ahmed Nuaman · Accepted Answer · 2011-12-16 10:06:45Z

1

It all stems from how you're handling the array. In JS array's don't have defined key names, instead you'd use an object, so this code works:

var alpha = { };
alpha['this'] = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
alpha['that'] = ['l', 'm', 'n', 'o', 'p', 'q', 'r'];

$.each(alpha, function() {
    $.each(this, function() {

        var li_tag = '<li class="alpha_li">' + this + '</li>';

        $(".alpharow").append(li_tag);
    });
});

alpha is changed to an object and we set this and that keys. We then use jQuery's $.each() to loop though the top object and then through each key to get to our array and then add them as li elements.

answered Dec 16, 2011 at 10:06

Ahmed Nuaman

13.4k16 gold badges58 silver badges88 bronze badges

3 Comments

T.J. Crowder Over a year ago

"In JS array's don't have defined key names" They do, in fact. Arrays are objects plus array-like behavior. It's true that he's not using the alpha object as an array, though.

Ahmed Nuaman Over a year ago

That's just splitting hairs now ;)

T.J. Crowder Over a year ago

@Ahmed: :-) I don't think so, though -- I use the fact that arrays are true objects and so can have arbitrary, non-element properties quite frequently (usually when I'm cross-indexing them).

Collectives™ on Stack Overflow

javascript array loop create element

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related