你会怎么用lodash / underscore做到这一点?

时间:2016-03-17 20:53:20

标签: javascript lodash

我有一个.json看起来像这样,但它实际上是更大的

[
  {
    "enterprise" : [
      {
        "id" : "743512",
        "name" : "Hellen Quesada",
        "role" : "P. Software Engineer",
        "picture" : "http://i276.photobucket.com/albums/kk35/Sicable/200x200/06.png",
        "skype" : "he.quesada",
        "email" : "hquesada1@publicisgroupe.net",
        "account" : "Digitas, Flag",
        "subDept" : "Enterprise",
        "location" : "Offshore: Costa Rica"
      },
      {
        "id" : "743587",
        "name" : "Jonathan Chavez",
        "role" : "P. Creative Engineer",
        "picture" : "http://i276.photobucket.com/albums/kk35/Sicable/200x200/06.png",
        "skype" : "jonathanchavesb",
        "email" : "jonathan.chaves@prodigious.cr",
        "account" : "Digitas, Flag",
        "subDept" : "Enterprise",
        "location" : "Offshore: Costa Rica"
      },
      {
        "id" : "749058",
        "name" : "Rodrigo Ovares",
        "role" : "Creative Engineer",
        "picture" : "http://i276.photobucket.com/albums/kk35/Sicable/200x200/06.png",
        "skype" : "rodrigo.ovares.arroyo",
        "email" : "rodrigo.ovares@publicisgroupe.net",
        "account" : "Digitas, Flag",
        "subDept" : "Enterprise",
        "location" : "Offshore: Costa Rica"
      },
      {
        "id" : "750684",
        "name" : "Juan Morera",
        "role" : "Software Engineer",
        "picture" : "http://i276.photobucket.com/albums/kk35/Sicable/200x200/06.png",
        "skype" : "morerajuan",
        "email" : "juan.morera@prodigious.cr",
        "account" : "Digitas, Flag",
        "subDept" : "Enterprise",
        "location" : "Offshore: Costa Rica"
      }
]

我正在像这样迭代它

$.map(JSON.parse(getData), function(items) {
    $.map(items, function(item) {
        $.map(item, function(data) {
                if (id === data.id) {
                    // SOMETHING HAPPENS HERE
                        cardTemplate.push('<li><span class="name-role" id="name">' +
                            '<span><img class="card-picture" src="'+ data.picture +'"/></span>' +
                            '<div class="main-info-card">' +
                              data.name + '<br>' +
                              data.role + '<br>' +
                              'Employee N.' + data.id +
                            '</div>' +
                        '</span></li>' +
                        '<li><p>Email: <strong>'+ data.email +'</strong></p></li>' +
                        '<li><p>Skype: <strong>'+ data.skype +'</strong></p></li>' +
                        '<li><p class="team"> '+ data.account +' <br> <strong>Enterprise</strong></p></li>' +
                        '<li><strong> '+ data.location +'</strong></li>');
                }
        });
    });
});

一位朋友只是让我使用lodash并且我正在阅读一些概念,例如map,forEach,each等,但我想知道如何使用较少的嵌套来改进上面的代码,例如_.flatten或_ .deepFlatten但我遇到的问题是我没有很好地理解这个概念。

你可以给我一个例子或更好的解决方案来帮助我,以避免像我上面那样使用$ .map。

到目前为止,它按预期工作,我只需要改进编码方式。

2 个答案:

答案 0 :(得分:1)

这样的事情应该有效: - )

let json = JSON.parse(jsonData);

json.forEach(function (itemLists) {
   _.each(itemLists, function (items, index) {
        var filteredItems = _.where(items, {id: id});
        cartTemplate.push.apply(cartTemplate, _.map(filteredItems, function(data) {
             return '<li><span class="name-role" id="name">' +
                            '<span><img class="card-picture" src="'+ data.picture +'"/></span>' +
                            '<div class="main-info-card">' +
                              data.name + '<br>' +
                              data.role + '<br>' +
                              'Employee N.' + data.id +
                            '</div>' +
                        '</span></li>' +
                        '<li><p>Email: <strong>'+ data.email +'</strong></p></li>' +
                        '<li><p>Skype: <strong>'+ data.skype +'</strong></p></li>' +
                        '<li><p class="team"> '+ data.account +' <br> <strong>Enterprise</strong></p></li>' +
                        '<li><strong> '+ data.location +'</strong></li>';
        }));
   });
});

答案 1 :(得分:0)

eachlodash函数的概念与jquery中的概念相同,例如

我注意到你的数组包含一个只包含一个字段(enterprise)的元素,因此你可以优化你的迭代:

_.each(yourArray[0].enterprise, function(data) {
    console.log(data.id);
});