Promises

example.js

// compiled javascript file

(function() {
  var appendToContainer, buildElement, buildElements, getAllPeople, getAllPets, getPeople, getPets,
    __slice = [].slice;

  $(document).ready(function() {
    return getAllPeople().then(getAllPets).then(buildElements).then(appendToContainer);
  });

  getPeople = function() {
    return $.ajax({
      url: "/people",
      type: "GET",
      dataType: 'json',
      contentType: 'application/json'
    });
  };

  getPets = function(person_id) {
    return $.ajax({
      url: "/people/" + person_id + "/pets",
      type: "GET",
      dataType: 'json',
      contentType: 'application/json'
    });
  };

  getAllPeople = function() {
    return getPeople();
  };

  getAllPets = function(people) {
    var mapPeopleToPets, person;
    mapPeopleToPets = function() {
      var i, pet, pets, _i, _len;
      pets = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
      for (i = _i = 0, _len = pets.length; _i < _len; i = ++_i) {
        pet = pets[i];
        people[i].pets = pet[0];
      }
      return people;
    };
    return $.when.apply($, (function() {
      var _i, _len, _results;
      _results = [];
      for (_i = 0, _len = people.length; _i < _len; _i++) {
        person = people[_i];
        _results.push(getPets(person.id));
      }
      return _results;
    })()).pipe(mapPeopleToPets);
  };

  buildElements = function(people) {
    var person, _i, _len, _results;
    _results = [];
    for (_i = 0, _len = people.length; _i < _len; _i++) {
      person = people[_i];
      _results.push(buildElement(person));
    }
    return _results;
  };

  buildElement = function(person) {
    var pet;
    return "<div>\n  " + person.first_name + " " + person.last_name + "\n  <ul>\n    " + (((function() {
      var _i, _len, _ref, _results;
      _ref = person.pets;
      _results = [];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        pet = _ref[_i];
        _results.push("<li>" + pet.name + " - " + pet.kind + "</li>");
      }
      return _results;
    })()).join('')) + "\n  </ul>\n</div>";
  };

  appendToContainer = function(els) {
    return $(".people-list").append(els);
  };

}).call(this);

example.js.coffee

$(document).ready ->

  # call chain, reads synchronous
  getAllPeople() # make ajax to get people
    .then(getAllPets) # get all pets for each person
    .then(buildElements) # build the UI Elements
    .then(appendToContainer) # show the ui to the container


getPeople = ->
  return $.ajax
    url: "/people",
    type: "GET",
    dataType: 'json',
    contentType: 'application/json'

getPets = (person_id) ->
  return $.ajax
    url: "/people/#{person_id}/pets",
    type: "GET",
    dataType: 'json',
    contentType: 'application/json'

getAllPeople = ->
  return getPeople()

getAllPets = (people) ->
  mapPeopleToPets = (pets...) ->
    people[i].pets = pet[0] for pet, i in pets 
    people

  $.when.apply($, getPets(person.id) for person in people)
    .pipe(mapPeopleToPets)

buildElements = (people) ->
  buildElement(person) for person in people

buildElement = (person) ->
  """ 
  <div>
    #{person.first_name} #{person.last_name}
    <ul>
      #{ ("<li>#{pet.name} - #{pet.kind}</li>" for pet in person.pets).join('') }
    </ul>
  </div>
  """

appendToContainer = (els) ->
  $(".people-list").append(els)