javascript - 在 jQuery 上正确使用 map

Question

我正在使用 jQuery 来实现我所需要的，但是我的代码中有一部分我认为我可以改进，但我没有想法，我有一个 json 调用，我将该数据存储在 localStorage 中变量

var getData = localStorage.getItem('jsonData');

那个变量有这个值

[
  {
    "enterprise" : [
      {
        "id" : "10",
        "name" : "Hellen Quesada",
        "role" : "Principal Software Engineer",
        "picture" : "http://i276.photobucket.com/albums/kk35/Sicable/200x200/06.png",
        "skype" : "skypeusername",
        "email" : "themail@email.com",
        "account" : "digitas, flag",
        "subDept" : "enterprise",
        "location" : "Offshose: Costa Rica"
      },
      {
        "id" : "11",
        "name" : "Jonathan Chavez",
        "role" : "Principal Creative Engineer",
        "picture" : "http://i276.photobucket.com/albums/kk35/Sicable/200x200/06.png",
        "skype" : "skypeusername",
        "email" : "themail@email.com",
        "account" : "digitas, flag",
        "subDept" : "enterprise",
        "location" : "Offshose: Costa Rica"
      },
      {
        "id" : "12",
        "name" : "Rodrigo Ovares",
        "role" : "Creative Engineer",
        "picture" : "http://i276.photobucket.com/albums/kk35/Sicable/200x200/06.png",
        "skype" : "skypeusername",
        "email" : "themail@email.com",
        "account" : "digitas, flag",
        "subDept" : "enterprise",
        "location" : "Offshose: Costa Rica"
      },
      {
        "id" : "13",
        "name" : "Juan Morera",
        "role" : "Software Engineer",
        "picture" : "http://i276.photobucket.com/albums/kk35/Sicable/200x200/06.png",
        "skype" : "skypeusername",
        "email" : "themail@email.com",
        "account" : "digitas, flag",
        "subDept" : "enterprise",
        "location" : "Offshose: Costa Rica"
      }
     ]
   }
]

我正在像这样迭代这个 json，以便到达 id 属性以在 DOM 中执行渲染

    $.map(JSON.parse(getData), function(items) {
        $.map(items, function(item) {
            $.map(item, function(data) {
                if (id === data.id) {
                    loading = true;
                    if (loading) {
                        $('.spinner').css('display', 'block');
                        setTimeout(function() {
                            $('.spinner').css('display', 'none');
                            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>');

                            $('<ul/>', {
                                "class" : "removeLi",
                                html: cardTemplate.join('')
                            }).prependTo('.personal-info');

                            var rem = $('.removeLi');

                            removeEl.push(rem);

                            if (rem.length > 1) {
                                rem.first().next().remove();
                            }
                        }, 1000);
                    }

                } // if ends
            });
        });
    });

如您所见，我有 3 个 $.map，这就是我想知道是否有改进该部分的方法，到目前为止，这 3 个 $.map 正在做我需要的，但我认为重复的 $.map 可能会带来一些性能问题。

你有什么建议？

Answer 1

我喜欢使用键值对查找对象。我不知道它是否更快但可能更具可读性。

function searchObject(object, keyvalue){
    var found = false;
    for (var property in object){
        if (object.hasOwnProperty(property)){
            if (typeof object[property] == 'object'){
                found = searchObject(object[property], keyvalue);
                if (found)
                    return found;
            }else{
                key = Object.keys(keyvalue)[0];
                if (property == key && object[key] == keyvalue[key]){
                    console.log('searchObject ' + keyvalue[key] + ' found');
                    return object;
                }
            }
        }
    }
}

对于你的情况，如果你想找到“13”，那么，

searchObject(getData,{id:"13"})

我将这个答案引用到@ Steve Veerman和@Jeroen Moons