Build a list of matched elements from an Array of Objects with jQuery

Question

I got a pretty simple code, but I bet it's really bad written. I tried to create some objects inside an array, and then build a list using jQuery .each() method.

I think this is stupidly easy, but I'm just learning...

This is the jQuery code I've written:

$(document).ready(function () {
    //items
    var armas = {
        BK: {
            mano_izq: [{
                type: 2,
                index: 5,
                name: "juan"
            }, {
                type: 2,
                index: 5,
                name: "juancho"
            }]
        },
        MG: {
            mano_der: [{
                type: 2,
                index: 5,
                name: "juan2"
            }, {
                type: 2,
                index: 5,
                name: "juan3"
            }]
        }
    };

    //controles
    $("#selec").on("click", function (e) {
        e.preventDefault();
        $(".itemlist").each(armas.BK.mano_izq, function (i, value) {
            $(this).append('<li>'+ value.name +'</li>');
        });
    });
});

As you can see, in that example I'm trying to build this list (without success, sadly)

<ul class="itemlist">
    <li>juan</li>
    <li>juancho</li>
    <li>juan2</li>
    <li>juan3</li>
</ul>

You can check my fiddle here: http://jsfiddle.net/Frondor/xbcxy8ur/

Roman Bekkiev · Accepted Answer · 2015-01-24 12:23:25Z

1

You should iterate through your objects, not through the list.

$("#selec").on("click", function (e) {
    e.preventDefault();
    var $itemlist = $(".itemlist");
    $.each(armas.BK.mano_izq, addLi);
    $.each(armas.MG.mano_der, addLi);
    function addLi(i, elem){
        $itemlist.append('<li>'+ elem.name +'</li>');
    }
});

Fiddle

answered Jan 24, 2015 at 12:23

Roman Bekkiev

3,1381 gold badge28 silver badges33 bronze badges

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

2 Comments

Frondor Over a year ago

I preffer to use the $.map() method over this, but +1 for the caching the addLi function

Roman Bekkiev Over a year ago

Well, actually $.map() has another intention. This method designed to translate one array to another one, not just to iterate through it even though translation include iteration. But if you wanna write more obvious (== better maintainable) code use API methods for its intended purpose. Unfortunately with jQuery $.map() is really more handy then $.each() due to flaw in $.each() design (iterator as first argument) but in other "swiss-knife" libraries (such as underscore) each definitely better.

Pete TNT · Accepted Answer · 2015-01-24 12:23:48Z

1

jQuery's .each() iterates over jQuery-objects. For regular objects, you'll need to use $.each(), which can iterate over any collection.

$("#selec").on("click", function (e) {
    e.preventDefault();
    $.each(armas.BK.mano_izq, function (i, value) {
        $('.itemlist').append('<li>'+ value.name +'</li>');
    });
    $.each(armas.MG.mano_der, function (i, value) {
        $('.itemlist').append('<li>'+ value.name +'</li>');
    });
});

answered Jan 24, 2015 at 12:23

Pete TNT

8,4834 gold badges40 silver badges47 bronze badges

2 Comments

Frondor Over a year ago

Can you tell me what's the difference between jQuery-objects and regular ones? Is there any difference on syntax?

Pete TNT Over a year ago

jQuery-objects are DOM-elements (such as divs, paragraphs, headers etc.) wrapped in a jQuery container, which includes all the jQuery-methods (such as .each(), .html(), .append()...). You can read more about them here: learn.jquery.com/using-jquery-core/jquery-object.

Oleksandr T. · Accepted Answer · 2015-01-24 12:34:34Z

1

You can use $.map to normalize your data, like this

var data = $.map(Object.keys(armas), function (el) {
   return $.map(Object.keys(armas[el]), function (key) {
       return armas[el][key];  
   });
});

$("#selec").on("click", function (e) {
    e.preventDefault();

    var list = $.map(data, function (el) {
        return '<li>' + el.name + '</li>';
    });

    // only once dom operation 
    $('.itemlist').html(list);
});

Example

answered Jan 24, 2015 at 12:34

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Comments

Sadikhasan · Accepted Answer · 2015-01-24 12:20:05Z

0

$.each(armas.BK.mano_izq, function (i, value) {
   $(".itemlist").append('<li>'+ value.name +'</li>');
});

$.each(armas.MG.mano_der, function (i, value) {
        $(".itemlist").append('<li>'+ value.name +'</li>');
});

Demo

answered Jan 24, 2015 at 12:20

Sadikhasan

18.6k23 gold badges84 silver badges126 bronze badges

Collectives™ on Stack Overflow

Build a list of matched elements from an Array of Objects with jQuery

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related