[jQuery] $.map, $.each, detach() , $.getJSOIN()

$.map function will return the modifies array.

$.each function will not new a new array, the old value will still be the same.

detach() funciton will remove the element from the DOM, you can append those element later, it works more eiffient.

getJSON

$('button').on('click', function() {
  $.getJSON('/cities/deals', function(result){
      $.each(result, function(index, dealItem) {
        var dealElement = $('.deal-' + index);
        dealElement.find('.name').html(dealItem.name);
        dealElement.find('.price').html(dealItem.price);
      });
  });
});

 

Let's take a minute to make our previous code a bit more efficient. Use the .detach() method to remove the .flight-times list element from the DOM before you insert the new listitems. Then, re-insert the .flight-times element back into the .flights element.

$('.update-available-flights').on('click', function() {
  $.getJSON('/flights/late', function(result) {
    var flightElements = $.map(result, function(flightItem, index){
      var flightEl = $('<li>'+flightItem.flightNumber+'-'+flightItem.time+'</li>');
      return flightEl;
    });
    $('.flight-times').detach().html(flightElements).appendTo('.flights');
  });
});