How to extract multiple requests function to services/factory. angularjs

Question

I need to make multiple requests to the worldbank api. Ive searched for it and ive got some answer that helped me. But i need to extract it in a factory, and i dont know what to return on the controller.

array

        var indicatorsArray = [

        {indicatorId: "AG.LND.TOTL.K2", name: "Land Area, Total (km²)"},
        {indicatorId: "AG.LND.TOTL.UR.K2", name: "Land Area, Urban (km²)"},
        {indicatorId: "AG.LND.TOTL.RU.K2", name: "Land Area, Rural (km²)"},
        {indicatorId: "AG.LND.FRST.K2", name: "Land Area, Forest (km²)"},
        {indicatorId: "SP.POP.TOTL", name: "Population, Total"},
        {indicatorId: "SP.POP.GROW", name: "Population Growth"},
        {indicatorId: "SP.POP.TOTL.FE.ZS", name: "Population, Female (%)"},
        {indicatorId: "SP.POP.TOTL.MA.ZS", name: "Population, Male (%)"},
        {indicatorId: "SP.DYN.LE00.MA.IN", name: "Life Expectancy, Male (years)"},
        {indicatorId: "SP.DYN.LE00.FE.IN", name: "Life Expectancy, Female (years)"},
        {indicatorId: "SP.DYN.AMRT.MA", name: "Mortality, Male (1/1000)"},
        {indicatorId: "SP.DYN.AMRT.FE", name: "Mortality, Female (1/1000)"}


    ];

factory.js

    function getIndicatorsData(country) {

        var getIndicators = function(indicatorId, name) {
            return $http.get("https://api.worldbank.org/v2/countries/" + country + "/indicators/" + indicatorId + "?MRV=5&Gapfill=Y&format=json")
            .then(getIndicatorsComplete);

            function getIndicatorsComplete(response) {
                return {
                    "indicatorValue": response.data
                }
            };
        };

        var promises = [];

        angular.forEach(indicatorsArray, function(indicator) {
            promises.push(getIndicators(indicator.indicatorId));
        });

        $q.all(promises).then(function(indicators) {
            vm.bankData = vm.bankData.concat(indicators);
        });
    };
}

controller.js

(function(){
    'use strict';

    angular
        .module('country-detail')
        .controller('CountryDetailController', CountryDetailController)

    CountryDetailController.$inject = ['$location', '$window', '$http','$stateParams', 'countryDataService', 'worldBankService'];

    function CountryDetailController($location, $window, $http, $stateParams,countryDataService worldBankService) {
        /* jshint validthis:true */

        var vm = this;
        vm.country = [];
        vm.bankData = [];

        activate();

        function activate() {
            return getCountry().then(function(response) {
                vm.bankData = getIndicatorsData();

            });
        };

        function getCountry() {
            return countryDataService.getCountry(vm.countryCode)
                .then(function(data) {
                    vm.country = data;
                    return vm.country;
                });
       };



        function getIndicatorsData() {
            return worldBankService.getIndicatorsData(vm.countryCode)
                .then(function(data) {
                    vm.bankData = data;
                    return vm.bankData;
                });
        };
    }
})()

Ive tried to return the data on the controller, but some error comes up.

I would like to know if there is some problems with my factory, and how to return the data on the controller.

The best solution for me its to know how to extract this in a factory.

i've updated the code including the controller file. please check it out — shoxton, Feb 13 '18 at 17:57

score 0 · Accepted Answer · answered Feb 13 '18 at 17:44

You are not returning anything from factory

function getIndicatorsData(country) {
    var getIndicators = function (indicatorId, name) {
        return $http.get("https://api.worldbank.org/v2/countries/" + country + "/indicators/" + indicatorId + "?MRV=5&Gapfill=Y&format=json")
            .then(getIndicatorsComplete);

        function getIndicatorsComplete(response) {
            return {
                "indicatorValue": response.data
            }
        };
    };

    var promises = [];

    angular.forEach(indicatorsArray, function (indicator) {
        promises.push(getIndicators(indicator.indicatorId));
    });

    return $q.all(promises);
}

Inside controller

getIndicatorsData().then(function (indicators) {
    console.log(indicators);
});

man... love you! turns out that the problem was the absence of `return`. Thanks so much! — shoxton, Feb 13 '18 at 18:02

How to extract multiple requests function to services/factory. angularjs

1 Answers1