2016-03-07 31 views
3

我正在使用jQuery来实现我需要的功能,但是在我的代码中有一部分是我认为可以改进的,但我没有想法,我有一个json调用,并且正在存储该数据在可变在jQuery上正确使用地图

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" : "[email protected]", 
     "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" : "[email protected]", 
     "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" : "[email protected]", 
     "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" : "[email protected]", 
     "account" : "digitas, flag", 
     "subDept" : "enterprise", 
     "location" : "Offshose: Costa Rica" 
     } 
    ] 
    } 
] 

而且我遍历这个JSON这样才能达到,直到id属性进行DOM中的渲染localStorage的

$.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 S和那就是我想知道是否有改善的那部分的方式,到目前为止,这3个$.map s的做什么我需要什么,但我认为重复$.map可能会带来一些性能问题。

你有什么建议?

回答

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