how to chain two http calls in AngularJS?

Question

I'm trying to chain two http calls. The first one returns a set of records and then I need to get finance data for each of them.

flightRecordService.query().$promise.then(function (flightRecords) {
  $scope.flightRecords = flightRecords;
  for (var i = 0; i < $scope.flightRecords.length; i++) {
    $scope.flightRecords[i].financeDocument =
      financeDocumentService
      .isReferencedDocumentIdCompensated({
        id: $scope.flightRecords[i].id
      }).$promise.then(
        function (data) {
          return ({
            'isCompensated': data.headers['compensated']
          });

        }
      );
    console.log($scope.flightRecords);
  }
});

This is the FlightRecord object:

$$hashKey: "object:27"
aircraft: {id: 100, registration: "LV-OEE", model: "152", status: "ACTIVE", brand: "Cessna", …}
amountOfHours: 1
canceled: false
closed: false
crew: [Object] (1)
destiny: null
endFlight: "2017-01-06T20:54:05.296"
financeDocument: d
  --> $$state: {status: 1, value: {isCompensated: "false"}}
  --> d prototipo
id: 100
landings: 0
nature: "LDI"
opened: true
origin: null
purpose: "VP"
startFlight: "2017-01-06T19:44:05.296"
status: "OPENED"
type: "ENT"

financeDocument object has not the structure I expect... I need a the following format:

...
endFlight: "2017-01-06T20:54:05.296"
financeDocument: { isCompensated: "false" }
id: 100
...

What I need to change to get that?

Thanks a lot!!

Phil · Accepted Answer · 2017-06-30 01:52:19Z

2

What you'll want to do is modify each "flight record" entry when you've retrieved the extra details. You'll also probably want to use $q.all to signal to the caller that the operation is complete.

const promise = flightRecordService.query().$promise.then(flightRecords => {
  return $q.all(flightRecords.map(flightRecord => {
    return financeDocumentService.isReferencedDocumentIdCompensated({
      id: flightRecord.id
    }).$promise.then(data => Object.assign(flightRecord, {
      isCompensated: data.headers.compensated
    }))
  }))
})

promise.then(flightRecords => {
  $scope.flightRecords = flightRecords
})

edited Jun 30, 2017 at 1:52

answered Jun 30, 2017 at 1:35

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Blue Over a year ago

Curious why you use Object.assign instead of just doing flightRecord.isCompensated = data.headers.compensated?

Phil Over a year ago

@FrankerZ Object.assign returns the amended object, thus resolving the promise with that object. The alternative would be data => {flightRecord.isCompensated = data.headers.compensated; return flightRecord}

georgeawg Over a year ago

I like that it returns a promise that can be used for more chaining

Esteban Over a year ago

Thanks @Phil! I use solution provided by @FrankerZ

Blue · Accepted Answer · 2017-06-30 01:27:10Z

1

Why not just set it on the original object?

flightRecordService.query().$promise.then(function (flightRecords) {
  $scope.flightRecords = flightRecords;
  for (var i = 0; i < $scope.flightRecords.length; i++) {
      (function(record) {
          financeDocumentService
          .isReferencedDocumentIdCompensated({
            id: $scope.flightRecords[record].id
          }).$promise.then(
            function (data) {
              $scope.flightRecords[record].financeDocument = {
               'isCompensated': data.headers['compensated']
              }
            });
    })(i)
    console.log($scope.flightRecords);
  }
});

answered Jun 30, 2017 at 1:27

Blue

23k7 gold badges69 silver badges102 bronze badges

2 Comments

Esteban Over a year ago

Hi @FrankerZ, first of all I want to thank you for your help then I want to ask you if you can help me I just want to understand what are you doing when you did: (function(record) { ..... })(i) Thanks a lot again!

Blue Over a year ago

It creates a capture and preserves the value of I (Which is record) for the duration of the function. Without it, the data function will overwrite the last key over and over again because i is now the last value.

amahfouz · Accepted Answer · 2017-06-30 01:26:59Z

-1

You are trying to set the financeDocument property synchronously using a Promise. You need to set the variable in the success callback of the promise.

answered Jun 30, 2017 at 1:26

amahfouz

2,4122 gold badges19 silver badges21 bronze badges

1 Comment

Esteban Over a year ago

Hi @amahfouz, how can I do this? Thanks

Collectives™ on Stack Overflow

how to chain two http calls in AngularJS?

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related