AngularJS waiting for JSON to bind before calling a function

Question

I am able to successfully bind my JSON to my form, however I have a JQuery function that should only be called once the data is fully loaded and complete. Currently it seems to call the jquery function immediately before the JSON has had time to be binded...

I temporarily used a timeout to call it after 200 milliseconds which worked but isnt the correct solution.

I don't seem to see a feature such as ajax Complete and have investigated Then and Promise but with no luck.

Having looked at Stackoverflow examples for Promise I adjusted my angular as follows:

var app = angular.module('businessProfile', []);

app.controller("dataCtrl", ['$scope','$http', function($scope, $http)
    {
        var promise = $http.get('data.json').then(function(data){

            $scope.businessData = data.data.Data;   


            return data.data.Data

        });



        promise.then(function(data) {
            // Function to call after JSON is ready
            $(".gllpLatlonPicker").each(function() {
                $(document).gMapsLatLonPicker().init( $(this) );
            });

        });

    }]
);

should be using a directive for this. DOM code doesn't belong in controller and angular is creating those elements it will run directive at appropriate time — charlietfl, Apr 30 '15 at 13:52
Or a service... The $http service holds the .success() callback, which fires when a response is ready. https://docs.angularjs.org/api/ng/service/$http — Billy, Apr 30 '15 at 13:53
possible duplicate of [Calling a function when ng-repeat has finished](http://stackoverflow.com/questions/15207788/calling-a-function-when-ng-repeat-has-finished) — antoinestv, Apr 30 '15 at 13:54
@AntoineEsteve no need to wait for ng-repeat to finish to initialize plugin on each element using directive — charlietfl, Apr 30 '15 at 13:56
@Billy - I had been using success however that was instantly calling the function and seemed the data just wasnt ready - by using a timeout of 200 milliseconds the function worked as expected but thats not truly waiting for the json to be complete and ready — user3779703, Apr 30 '15 at 13:59
@user3779703 If success() is called, your response is ready to be processed, no need for any delay at that point. You should be making a factory(service) and create a proper callback function you can use globally across your whole application. As charlietfl mentioned, DOM doesn't belong in your controller, you should use a directive for that. — Billy, Apr 30 '15 at 14:04

score 3 · Answer 1 · answered Apr 30 '15 at 13:58

Controllers should just control the view, and don't do APIs call, you really should use a factory or a service there.

Anyway, why you don't make the function call inside the .get()?

app.controller("dataCtrl", ['$scope','$http', function($scope, $http)
    {
        $http.get('data.json').then(function(data){
            $scope.businessData = data.data.Data;  
            myFunction($scope.businessData); 
        });

        myFunction(data) {
            // Function to call after JSON is ready
            $(".gllpLatlonPicker").each(function() {
                $(document).gMapsLatLonPicker().init( $(this) );
            });
        }
    }]
);

AngularJS waiting for JSON to bind before calling a function

1 Answers1