Создайте список совпадающих элементов из массива объектов с помощью jQuery

Question

У меня есть довольно простой код, но я уверен, что это очень плохо написано. Я попытался создать некоторые объекты внутри массива, а затем построить list с использованием метода jQuery .each().

Я думаю, что это глупо легко, но я только учусь ...

Это код JQuery я написал:

$(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>'); 
     }); 
    }); 
}); 

Как вы можете видеть, в этом примере я пытаюсь построить этот список (без успеха, к сожалению)

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

Вы можете проверить мою скрипку здесь: http://jsfiddle.net/Frondor/xbcxy8ur/

Answer 1

$.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

Answer 2

Вы должны перебирать свои объекты, а не по списку.

$("#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

Answer 3

.each() итерацию JQuery в течение JQuery-объектов. Для обычных объектов вам нужно будет использовать $.each(), который может перебирать любую коллекцию.

$("#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>'); 
    }); 
}); 

Answer 4

Вы можете использовать $.map для нормализации данных, как этот

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