2

I have a function that calls another function which then does two things:

  1. It does an http get to grab a list of IDs
  2. It then loops through that list of IDs, makes another http get for each ID, and adds the result to the var 'dataList'.

I need to have it return the fully populated dataList as the result, then I can take that list and do something with it. I know I need to use promises for this but I'm having trouble getting the behavior I'm looking for. My latest attempt is below. This does return the expected list, but then it seems to get stuck in a loop - I think it's doing a return for every iteration of the map loop. Any suggestions would be appreciated.

getDataList(searchString, matchCase, rows, start).then(function(result) {
   // Do something with result
});

getDataList: function(searchString, matchCase, rows, start) {
    let body = {};
    let dataList = [];
    var url = getUrl();
    var defer = $q.defer();
    return $http.get(url).success(function(response) {
        let dataIdList = [];
        body = response.response.docs;
        body.map(function getDataId(wfr) {
            if (wfr.referenceType === 'data') {
                dataIdList.push(wfr.referenceId);
            }
        });
        dataList = dataIdList.map(function getData(dataId) {
            dataSvc.getDataDetails(dataId).then(function(response) {
                dataList.push(response);
            });
        });
        defer.resolve(dataList);
    }).error(function(result) {
        defer.reject();
    });
}
georgeawg
  • 48,608
  • 13
  • 72
  • 95
monkeyWithAMachinegun
  • 301
  • 2
  • 5
  • 19

2 Answers2

2

The .success and .error methods have been removed from the AngularJS framework.1 Avoid using the deferred anti-pattern.2 Use $q.all to resolve multiple AngularJS promises:

getDataList: function(searchString, matchCase, rows, start) {
    var url = getUrl();
    return $http.get(url).then(function(response) {
        let body = response.data.response.docs;
        let dataIdList = 
          body.filter(wfr => wfr.referenceType === 'data').map(_ => _.referenceId);
        let dataListPromiseArr = dataIdList.map(dataId =>  {
            return dataSvc.getDataDetails(dataId).then(function(response) {
                return response.data;
            });
        });
        return $q.all(dataListPromiseArr);
    }).catch(function(response) {
        console.log(response);
        throw response;
    });
}

For more information, see

georgeawg
  • 48,608
  • 13
  • 72
  • 95
0

I think Promise.all() is what you are looking for.

You can push all the getDataDetails(dataId) requests as promises to an array, then do Promise.all(yourPromiseArray) and return what you want only after Promise.all has successfully finished.

I'd highly recommend looking into async/await during your research, as it could be quite helpful. Plenty of articles on the internet on how you can implement it, and many many StackOverflow questions to look through if you feel like you're stuck with it.

Hope this helps, good luck! :)

saglamcem
  • 677
  • 1
  • 8
  • 15
  • The ES6 promises returned by `async`/`await` and `Promise.all` are not integrated with the AngularJS framework. AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc. – georgeawg Dec 20 '19 at 23:39
  • @georgeawg My bad, thanks for the detailed explanation! :) I knew about async/await not being "supported", but didn't know `Promise.all` wasn't integrated. I just wanted to point it out so the OP could read up on it a bit, and have a possibly useful information for future encounters. – saglamcem Dec 21 '19 at 00:29