Getting response but view is not updating - AngularJS

Question

I am trying to get the response from a url and populate in the view, but I am do not see the view getting updated. Help me to resolve this issue. Thanks

Source

<!DOCTYPE html>
<html ng-app="myModule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-init="priceList='promo03'">
<div ng-controller="PricingController" >
    <div ng-repeat="item in finalList track by $index">
    <ul>
        <li>Actual Price: {{item.actualPrice}}</li>
        <li>Button: {{item.button}}</li>
        <li>Content: {{item.content}}</li>
        <li>Description: {{item.description}}</li>
        <li>Discounted Price: {{item.discountedPrice}}</li>
    </ul>
    </div>
</div>
<script>
var myModule = angular.module('myModule',[]);
myModule.service('bannerService', ['$http', function ($http) {
    this.getBannerList = function (id, success) {
        invokeHttp('https://poctest1.firebaseio.com/Pricing/' + id + '.json', success);
    }
    var invokeHttp = function (url, callback) {
        var value = $http({ method: 'GET', url: url }).
            success(function (data) {
                callback(data);
            }).error(function () {
                callback(null);
            });
            return value;
    };
}]);

myModule.controller('PricingController',['$scope','bannerService', function($scope, bannerService){
    $scope.finalList = [];
    var finalArray = [];
    $scope.splitArray= function(){
        $scope.array = $scope.priceList.split(",");
    };
    $scope.callService = function(){
        for(i = 0; i < $scope.array.length; i++){
            //console.log(bannerSupportService.fetch($scope.array[i])); 
            bannerService.getBannerList($scope.array[i], function(banner){
            if(banner != null){
                finalArray.push(angular.toJson(banner));
            }   
            if(i == $scope.array.length){
                $scope.finalList = finalArray;
                console.log('Final'+$scope.finalList);
            }
        });
        }
    };

    $scope.splitArray();
    $scope.callService();

}]);
</script>
</body>
</html>

Console Output

Final{"actualPrice":10,"button":"Check Availability","content":"£5 for 6 months, £10 a month for further 6","description":"Fiber broadband","discountedPrice":5}

HTML Actual Output

Actual Price:
Button:
Content:
Description:
Discounted Price:

HTML Expected Output

Actual Price: 10
Button: Check Availability
Content: £5 for 6 months, £10 a month for further 6
Description: Fiber broadband
Discounted Price: 5

$scope.finalList = finalArray; after this use - $scope.$apply() — Rahul G Nair
– Rahul G Nair, Commented Jun 19, 2015 at 4:57
I tried this already. I am getting this error code: docs.angularjs.org/error/$rootScope/inprog?p0=$digest — Kaushik
– Kaushik, Commented Jun 19, 2015 at 5:00
you console.log looks like $scope.finalList is an object not an array — lucas
– lucas, Commented Jun 19, 2015 at 5:24

Maxim Shoustin · Accepted Answer · 2015-06-19 05:26:10Z

2

Final{"actualPrice":10,"button":"Check Availability","content":"£5 for 6 months, £10 a month for further 6","description":"Fiber broadband","discountedPrice":5}

This output represents object but not array, suppose you wait for array. Therefore ng-repeat prints nothing. Should be something like:

[
  {
    "actualPrice": 10,
    "button": "Check Availability",
    "content": "£5 for 6 months, £10 a month for further 6",
    "description": "Fiber broadband",
    "discountedPrice": 5
  }
]

Your service works properly so fix controller part

answered Jun 19, 2015 at 5:26

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kaushik Over a year ago

Thanks.. It helped me to solve the issue. Changed this line finalArray.push(angular.toJson(banner)); to finalArray.push(banner);

Collectives™ on Stack Overflow

Getting response but view is not updating - AngularJS

Source

Console Output

HTML Actual Output

HTML Expected Output

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Source

Console Output

HTML Actual Output

HTML Expected Output

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related