Using map properly on jQuery

Question

I am using jQuery to achieve what I need, but there is a part in my code that I think I can improve but I am out of ideas, I have a json call and I am storing that data in the localStorage in a variable

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

That variable has this value

[
  {
    "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"
      }
     ]
   }
]

And I am iterating this json like this in order to reach until the id property to perform a render in the 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
            });
        });
    });

As you see I have there 3 $.maps and that is what I want to know if there is a way to improve that part, so far those 3 $.maps are doing exactly what I need, but I think that repeated $.map could bring some performance issues.

What do you recommend?

Answer 1

I like to find find object with using key value pair. I don't know if it is faster but probably more readable.

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;
                }
            }
        }
    }
}

For your case if you want to find "13" then,

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

I am referencing this answer to @Steve Veerman and @Jeroen Moons