Callback not working with Angularjs?

Question

I am new to promises and callbacks in javascript. In my project I'm trying to use getJSON to pull in info and use it in my controller. Here is what I have so far:

vm.addStop = function () {
    vm.isBusy = false;
    var result;
    try {
        vm.getCoords(vm.newStop.name, function (result) {
            console.log("Trying to use this callback: ");
            console.log(result);
            // callback worked? continue from here
            var newStop = sqlFactory.addStop(vm.newStop.name, result.lat, result.lng, vm.newStop.stopDate, vm.tripNum);
            vm.stops.push({
                id: parseInt(newStop.id),
                name: String(newStop.name),
                latitude: result.lat,
                longitude: result.lng,
                stopDate: new Date(vm.newStop.stopDate),
                tripNum: parseInt(newStop.tripNum)
            });
        });
    }
    catch (err) {
        vm.isBusy = false;
        vm.errorMessage = "Error saving stop: " + err;
    }
};

vm.getCoords = function (name, callback) {
    var location = name;
    var result = "";
    location = location.replace(" ", "+");
    var url = "https://maps.googleapis.com/maps/api/geocode/json?address=" + location + "&key=key";

    $.getJSON(url)
        .done(function (data) {
            result = {
                lat: data.results[0].geometry.location.lat,
                lng: data.results[0].geometry.location.lng
            };
            callback(result);
        })
        .fail(function (err) {
            result = "error";
        });
};

My problem is that when I'm trying to use the data from the callback and push it to vm.stops, it doesn't seem to actually run all the way through. It seems to pause after my sqlFactory.addStop function. If I refresh the page it will show that I did actually save it to my database correctly through my sqlFactory function right before the push. The data-bind push itself however does not show up in the browser at all.

I'm assuming this is because it is still an asynchronous function overall? Is there any method I can use to make the push work properly, or properly get the data back from the getJSON call after it has finished? Or maybe even just a page refresh function?

Answer 1

try to use $q provider

vm.getCoords(vm.newStop.name, function (result) {
    console.log("Trying to use this callback: ");
    console.log(result);
    // callback worked? continue from here
    $q.all(sqlFactory.addStop(vm.newStop.name, result.lat, result.lng, vm.newStop.stopDate, vm.tripNum))
    .then(function (result) {
        var newStop = result[0];
        vm.stops.push({
            id: parseInt(newStop.id),
            name: String(newStop.name),
            latitude: result.lat,
            longitude: result.lng,
            stopDate: new Date(vm.newStop.stopDate),
            tripNum: parseInt(newStop.tripNum)
        });
    });

});