Value returned by service not update in controller's variable in angularjs

Question

function getList() {

        SubCategoryService.getAllList().then(function (response) {
            $scope.subCategoryList = response.data;
            $scope.subCategoryDetailsList = [];

            var subCategoryDetails = [];



            for(var i=0; i < $scope.subCategoryList.length; i++) {

                var subCategoryListData = $scope.subCategoryList[i];

                var subcategory = {
                    'id' : subCategoryListData.id,
                    'category' : '',
                    'name' : subCategoryListData.name,
                    'created_on' : subCategoryListData.created_on,
                    'modified_on' :  subCategoryListData.modified_on,
                    'is_deleted' : subCategoryListData.is_deleted,
                    'is_active' : subCategoryListData.is_active,
                    'image_name' : subCategoryListData.image_name,
                    'image_path' : subCategoryListData.image_path
                }

                CategoryService.getCategoryById(subCategoryListData.category_id).then(function(response1) {
                    console.log(response1.data);
                    subcategory.category = response1.data;

                }, function(error) {
                    swal("Error", error.data, "error");
                })

                subCategoryDetails.push(subcategory);
            }

            console.log(JSON.stringify(subCategoryDetails));

        }, function (error) {
            swal("Error", "Something went wrong", "error");
        });
    }

CategoryService:

  this.getCategoryById = function(id) {
            return $http({
                url: globalUrl.baseurl + 'category/getCategoryById/' + id,
                method: 'GET'
            })
        }

in the above code i am tring to fetch data from CategoryService service and it successfully return the data within the CategoryService.getCategoryById function. Now i am trying to assign returned value by service to subcategory.category which is present in controller. but my problem is it is not updateing the value in subcategory.category.

Answer 1

my guess is:

you are pushing the new variabile inside the array BEFORE the API call is executed (because of the js callback), can you try something like:

CategoryService.getCategoryById(subCategoryListData.category_id)
.then(function(response1) {
    console.log(response1.data);
    subcategory.category = response1.data;

    // PUSHING AFTER API RETURNS THE VALUE
    subCategoryDetails.push(subcategory);

}, function(error) {
    swal("Error", error.data, "error");
})

// subCategoryDetails.push(subcategory);