Using map properly on jQuery
<p>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</p>

<p><code>var getData = localStorage.getItem('jsonData');</code></p>

<p>That variable has this value</p>

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

<p>And I am iterating this json like this in order to reach until the <code>id</code> property to perform a render in the DOM</p>

<pre><code>    $.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('&lt;li&gt;&lt;span class="name-role" id="name"&gt;' +
                                '&lt;span&gt;&lt;img class="card-picture" src="'+ data.picture +'"/&gt;&lt;/span&gt;' +
                                '&lt;div class="main-info-card"&gt;' +
                                  data.name + '&lt;br&gt;' +
                                  data.role + '&lt;br&gt;' +
                                  'Employee N.' + data.id +
                                '&lt;/div&gt;' +
                            '&lt;/span&gt;&lt;/li&gt;' +
                            '&lt;li&gt;&lt;p&gt;Email: &lt;strong&gt;'+ data.email +'&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;' +
                            '&lt;li&gt;&lt;p&gt;Skype: &lt;strong&gt;'+ data.skype +'&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;' +
                            '&lt;li&gt;&lt;p class="team"&gt; '+ data.account +' &lt;br&gt; &lt;strong&gt;Enterprise&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;' +
                            '&lt;li&gt;&lt;strong&gt; '+ data.location +'&lt;/strong&gt;&lt;/li&gt;');

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

                            var rem = $('.removeLi');

                            removeEl.push(rem);

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

                } // if ends
            });
        });
    });
</code></pre>

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

<p>What do you recommend?</p>