Looping Through an Array with jQuery

Question

I have a question about creating Custom Lists with User Friendly touch.

I have the following example:

var unitA = [];
unitA[0] = "Unit A One";
unitA[1] = "Unit A Two";
unitA[2] = "Unit A Three";

var unitB = [];
unitB[0] = "Unit B One";
unitB[1] = "Unit B Two";
unitB[2] = "Unit B Three";

var level = [];
level[0] = "Level 1";
level[1] = "Level 2";
level[2] = "Level 3";

var skill = [];
skill[0] = "This has Skill 1";
skill[1] = "This has Skill 2";
skill[2] = "This has Skill 3";
skill[3] = "This has Skill 4";

$('<div class="units"></div>').appendTo('body');

var unit = [];
$.each(unitA, function(index, value) {unit.push('<div class="unitA-'+index+' u">'+value+'</div>');});
$.each(unitB, function(index, value) {unit.push('<div class="unitB-'+index+' u">'+value+'</div>');});
$(".units").html(unit.join(""));

The code above would loop through unitA and unitB and output data to HTML body in the DIV.

Unit A One
Unit A Two
Unit A Three
Unit B One
Unit B Two
Unit B Three

After I do this:

$(".unitA-0").append(
                '<ul>'+level[0]+'<li>'+skill[0]+'</li><li>'+skill[1]+'</li><li>'+skill[2]+'</li><li>'+skill[3]+'</li></ul>',
                '<ul>'+level[1]+'<li>'+skill[0]+'</li><li>'+skill[1]+'</li><li>'+skill[2]+'</li><li>'+skill[3]+'</li></ul>'
                );

$(".unitA-1").append(
                '<ul>'+level[0]+'<li>'+skill[0]+'</li><li>'+skill[1]+'</li></ul>',
                '<ul>'+level[1]+'<li>'+skill[1]+'</li></ul>',
                '<ul>'+level[2]+'<li>'+skill[0]+'</li><li>'+skill[1]+'</li><li>'+skill[2]+'</li><li>'+skill[3]+'</li></ul>'
                );

This would output data as:

Unit A One
> Level 1 > Skill 1 / Skill 2 / Skill 3 / Skill 4
> Level 2 > Skill 1 / Skill 2 / Skill 3 / Skill 4
Unit A Two
> Level 1 > Skill 1 / Skill 2
> Level 2 > Skill 2
> Level 3 > Skill 1 / Skill 2 / Skill 3 / Skill 4
Unit A Three
Unit B One
Unit B Two
Unit B Three

My goal is to create user friendly and maintainable code similar to List / Menu / Navigation style as I might have many of the Units, Levels and Skills.

If anyone can suggest how to create more efficient logic to handle this.

More like:

unitA-1+level-1+skill-1+skill-2
unitA-1+level-2+skill-1+skill-4+skill-5

Would output:

<div class="unitA-1">Unit Name 1
<ul class="level-1">Level Name 1
<li>Skill Name 1</li>
<li>Skill Name 2</li>
</ul>
<ul class="level-2">Level Name 2
<li>Skill Name 1</li>
<li>Skill Name 4</li>
<li>Skill Name 5</li>
</ul>
</div>

Thank you all for your time!

Zach Lesperance · Accepted Answer · 2015-01-08 20:40:47Z

0

If I understand your problem correctly, you may want to first look at how you're storing the data.

With this kind of relational model (Units have Levels which have Skills), you may want to use a JSON-like way of storage. For Example:

var units = [
    {
        name   : 'Unit Name 1',
        levels : [
            {
                name   : 'Level Name 1',
                skills : [
                    'Skill Name 1',
                    'Skill Name 2'
                ]
            },
            {
                name   : 'Level Name 2',
                skills : [
                    'Skill Name 1',
                    ...
                ]
            },
            ...
        ]
    },
    {
        name   : 'Unit Name 2',
        levels : [
            ...
        ]
    },
    ... 
];

You can loop through these with jQuery like:

$(units).each(function (unitIndex, unitValue) {
    // Print <div>unitValue.name</div>
    $(unitValue.levels).each(function (levelIndex, levelValue) {
        // Print header for list (levelValue.name) and <ul>
        $(levelValue.skills).each(function (skillIndex, skillValue) {
            // Print <li>skillValue</li>
        });
    });
});

answered Jan 8, 2015 at 20:40

Zach Lesperance

3572 silver badges8 bronze badges

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

1 Comment

user3779776 Over a year ago

It worked! I used var $unit = $('<div class="'+unitIndex+'">'+unitValue.name+'</div>'); and at the end $('body').append($unit.append($level.append($skill)));

Collectives™ on Stack Overflow

Looping Through an Array with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related