Transfer the output to the second `then` callback of a $q promise

Question

Transfer the output to the second `then` callback of a $q promise

Here is a straightforward code snippet for you to consider:

function colorPromise() {
  return $q.when({data:['blue', 'green']})
}

function getColors() {
  return colorPromise().then(function(res) {
     console.log('getColors', res)
     // perform some action with res
  };
}

function testGetColors() {
  getColors().then(function(res) {
    if (angular.equals(res, {data:['blue', 'green']})) {
      console.log('passes')
    }
  });
}

Explore this Plunker: http://plnkr.co/edit/LHgTeL9sDs7jyoS7MJTq?p=preview
In the provided example, the value of res in the testGetColors function happens to be undefined.

What can be done to successfully pass res to the second then function within the $q promise?

javascript angularjs q

Answer 1

Answer №1

Make sure to retrieve the value stored in res

function fetchPalette() {
  return paletteRequest().then(function(response) {
     console.log('fetchPalette', response)
     return response; // Remember to grab the response here
  };
}

Answer 2

Make sure to retrieve the value stored in res

function fetchPalette() {
  return paletteRequest().then(function(response) {
     console.log('fetchPalette', response)
     return response; // Remember to grab the response here
  };
}

Answer 3

Answer №2

Make sure to include the return statement within your first then.

function retrieveData() {
  return dataPromise().then(function(result) {
     console.log('retrieveData', result)
     // process the result

     return result; //<---
  };
}

The .then method itself returns a promise. If the callback function you provide to it returns a non-promise value, that promise will be resolved immediately with that value (which is what happens in this instance where the function returned undefined). Remember, you can also return a promise within your then callback to have the then promise chain to that new promise.

Answer 4

Make sure to include the return statement within your first then.

function retrieveData() {
  return dataPromise().then(function(result) {
     console.log('retrieveData', result)
     // process the result

     return result; //<---
  };
}

The .then method itself returns a promise. If the callback function you provide to it returns a non-promise value, that promise will be resolved immediately with that value (which is what happens in this instance where the function returned undefined). Remember, you can also return a promise within your then callback to have the then promise chain to that new promise.

Answer 5

Answer №3

Ensure to include return res statement within the getColors function, check out the example on this plunkr

Answer 6

Ensure to include return res statement within the getColors function, check out the example on this plunkr

Transfer the output to the second `then` callback of a $q promise

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to define the width of an element within the display:flex property in CSS?

When a named capture group is included in the regex of a GET path, Express crashes with the error message: "Cannot read property 'name' of undefined at Layer

Two conflicting jQuery plugins are causing issues

Guide: Previewing uploaded images with HTML and jQuery, including file names

Leveraging jQuery and Ajax for retrieving information from a JSON document

Updating parameters in Node.js with mongoose

generate code to automatically output the content of a website

Trouble with populating Ext.grid.Panel from ExtJS4 JSON data

transferring a string parameter from PHP to a JavaScript function

The initialization of an Angular variable through ng-init will consistently result in it being undefined

Button missing post ajax loading

Unusual behavior exhibited by dynamic code in iframe

Leveraging Selenium to dismiss a browser pop-up

What is the correct way to update an array of objects using setState in React?

AngularJS is not showing the dropdown options as expected

Creating a dynamic div with various paragraphs using only Javascript

Display various child components in a React application depending on the current state

What is the best way to keep a text editable in a razor editor without it vanishing?

Implementing authentication fallback during re-login when a session expires in a web application built with React, Node.js, and Mariadb database

The socket context provider seems to be malfunctioning within the component