Convert promise in JSON object

Question

I have a problem converting the promise returned by the service to the controller. What I want is to create an array of JSON objects from the data contained in promise. Here is what I receive in the controller:

Here is the line that is used for printing that data:

console.log("controller unmatched: ", unmatched.getData(sFilter));

Here "unmatched" is the service, and getData() is its function.

Thanks!

Immortelle

Are you asking how to get the data from a response? Assuming you're resolving the response from $http with no modification it would just be Service.someRequest(params).then(function(response) { $scope.data = response.data; }, function(err) { /* do something with err */ }); – Birdhouse

Answer 1

A Promise represents a value that will be available some time in the future, or never. This means its eventual value can't be returned by your unmatched.getData() function.

What you need to do is to make unmatched.getData() return the actual promise and then you take action when that promise resolves:

unmatched.getData(sFilter).then(function(result) {
  console.log("controller unmatched: ", result);
});

Knave

Thanks! If I want to save that data to a variable, should I use $scope, and would I be able to access it from outside of this function? – Immortelle

with esnext you can do: const data = await unmatched.getData(sFilter); – Nova

@Immortelle Any variable that is declared in the outer scope. As a property on $scope accomplishes this. The important thing to keep in mind is that any action that depends on this variable needs to be taken when the promise has resolved, not before that. – Knave

@Nova Yes, provided that the current function was declared as async – Knave

So basically we have to make use of the data provided by promise inside the .then block only... right? – Rideout

Answer 2

Edit

Depending on your build process, you might be able to take advantage of the async/await API as well, which might simplify promises for you.

async function myCallbackFn(): void {
    const response = await unmatched.getData(sFilter);
    const json = JSON.stringify(response);
}

Original

I believe what you really want to do is save a value the promise resolves to, not the promise itself.

unmatched.getData(sFilter).then(response => {
    const json = JSON.stringify(response);
});

This is due to the nature of promises - they are asynchronous.

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

Source: Promises on MDN

Kt

Answer 3

Promises work async:

unmatched
  .getData(sFilter)

  // wait for its resolution
  .then(data => console.log(JSON.stringify(data))
;

Nova

note that stringifying the data in this example is only so it is easy to read. It is unnecessary when you want to access the members of the returned data. – Hindermost

What did you say? I wanted only to log the result, explaining how to handle Promise returned values... it was just an example, you can do whatever you want with the returned data. – Nova

how do I access the members (everyone exemplifies with console.log, I'd like to store into variables) – Len

Answer 4

if you want to get the JSON objects from the promise, I think you can use the below line of code

response.json()

Shawnee

This answer needs more detail and context to be useful. – Nierman