Multiple API request and Object.assign in javascript map function

Question

Thanks in advance. I am going to combine the return value but failed.

There are 3 API requests and 3 return value:

The First:

https://gateway.trybindo.com/v2/stores/382/purchase_orders/17157

Return value:

{purchase_order:
  {purchase_items: [{id: 01, source_id: 24308265}, {id:02, source_id: 3820202}]  }
}

The Second:

https://trybindo.com/api/v2/stores/382/listings/ + 'source_id'

Return value:

// source_id = 24308265
{listing:  {base_unit: {unit_group_id: 345} }}

// source_id = 3820202
{listing:  {base_unit: {unit_group_id: 308} }}

The Third:

https://trybindo.com/api/v2/stores/382/unit_groups/+ 'unit_group_id'

Return value:

{unit_group:
 id: 345,
 units: [{name: 'mg'}, {name: 'g'}, {name: 'kg'}]
}

{unit_group:
 id: 308,
 units: [{name: 'unit name test1'}]
}

And What I WANT is:

{purchase_order:
   {purchase_items: [
     {id: 01, source_id: 24308265, units: ['mg','g','kg']}, 
     {id:02, source_id: 3820202, units:['unit name test1']}
   ]}
}

When I request one item it works well:

var getPurchaseOrder = function(id, store_id) {
  $http.get(URL01)
    .success(function(data) {
      let purchase_items = data.purchase_order.purchase_items;

      $http.get(URL02 + purchase_items[0].source_id)
        .success(function(listing){

        $http.get(URL03 + unit_group_id)
        .success(function(units){
          let unitsArray = units.unit_group.units.map(v=>v.name)
          purchase_items[0] = Object.assign({}, purchase_items[0], {units: unitsArray})
          deferred.resolve( data.purchase_order );
        })
      })
    })
  return deferred.promise;
};

but when I tried to use the map function and Object.assign it failed:

var getPurchaseOrder = function(id, store_id) {
  $http.get(URL01)
    .success(function(data) {
      let purchase_items = data.purchase_order.purchase_items;

      purchase_items.map(purchase_item => {

        $http.get(URL02 + purchase_item.source_id)
          .success(function(listing){
          $http.get(URL03 + unit_group_id)
          .success(function(units){
            let unitsArray = units.unit_group.units.map(v=>v.name)
            purchase_item = Object.assign({}, purchase_item, {units: unitsArray})
            deferred.resolve( data.purchase_order );
          })
        })
      })
    })
  return deferred.promise;
};

How can I fix this issue?

Answer 1

This question may already have an answer here: Best way to call an async function within map?

The difference is angularjs, so the solution is:

 var getPurchaseOrder = function(id, store_id) {
    var deferred = $q.defer();
    $http.get($rootScope.gateway + '/v2/stores/' + store_id + '/purchase_orders/' + id)
      .success(function(data) {
        let purchase_items = data.purchase_order.purchase_items;
        let promises = purchase_items.map((item) => {
          let innerDefer = $q.defer()
          $http.get($rootScope.api+'/api/v2/stores/'+ store_id + '/listings/' + item.source_id)
            .success((listing) => {
              $http.get($rootScope.api+'/api/v2/stores/'+ store_id + '/unit_groups/'+ listing.listing.unit_group_id)
              .success(function(units){
                let unitsArray = units.unit_group.units.map(v=>v.name)
                item.units = unitsArray
                innerDefer.resolve( item );
              })
            })
          return innerDefer.promise
        })
        $q.all(promises).then((purchase_items) => {
          data.purchase_order.purchase_items = purchase_items
          deferred.resolve(data.purchase_order)
        })
      })
      .error(function(err) {
        deferred.reject(err);
      });
    return deferred.promise;
  };