CODEWITHSUNDEEP
javascriptangularjsangular-promise
monkeyWithAMachinegun
monkeyWithAMachinegun

Reputation: 331

Need to return data from $http query only after result list is processed

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();
    });
}

Upvotes: 2

Views: 88

Answers (2)

georgeawg
georgeawg

Reputation: 48968

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

Upvotes: 2

saglamcem
saglamcem

Reputation: 687

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! :)

Upvotes: 0

Related Questions