jQuery Promises then

by Jorge Bustos Pereda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<h2>
Promise filtering with then
</h2>
<h4>
This sample shows how .then() returns a new promise resolved with
the value returned by the "done" callback.
</h4>
<div id="log"></div>

JavaScript

var deferred = $.Deferred();
var promise = deferred.promise();
setTimeout(function(){
	deferred.resolve({name: 'Original resolved value'})
}, 2000);

var log = function(text) {
	var $p = $('<p>');
  $p.text(text);
  $('#log').append($p);
}
log('Waiting for promise to be resolved');

promise.then(function(data) {
  log('* 1st callback *');
	log('Original promise resolved with: ' + JSON.stringify(data));
  log('Modify and return object');
  data.name = 'Filtered resolved value';
  return data;
}).then(function(data) {
  log('* 2nd callback *');
	log('1st filtered promise resolved with: ' + JSON.stringify(data))
  log("Doesn't return anything");
}).then(function(data) {
  log('* 3rd callback *');
	log('2nd filtered promise resolved with: ' + JSON.stringify(data))
});