Why is $http request not working in this Cordova Application?

Question

I am trying to bring the data in the code to my application, here is the factory.

angular.module('starter.services', [])

    .factory('Locations', function ($http, $q) {
        // Might use a resource here that returns a JSON array
            var url = "https://portal.mobilequbes.com/api/kiosks?callback=JSON_CALLBACK";
            var locations = function () {
                $http.jsonp(url)
                    .then(function (result) {
                        return result.data;
                    });
            };

        return {
            all: function () {
                return locations;
            },
            get: function (locId) {
                for (i = 0; i < locations.length;i++){
                    if (locations[i].friendlyName == parseInt(locId)) {
                        return locations[i];
                    }
                }
            }
        }
    });

and my controller:

.controller('MapCtrl', function ($scope, $http, Locations) {
    $scope.locations = Locations.all();
    $scope.createMarks = function () {
        createList(Locations.all());
    }
})

When it loads, it just loads nothing or two objects that look like this: ' '

I am not sure why because I cannot seem to discern any problems and I feel like I have read this to death. I have tested the return function using jsFiddle and it worked fine so it has something to do with ionic/cordova I am fairly sure.

Your `locations` function will always return undefined - `return result.data;` is returning the `.then` callback function, not `locations` itself. — Joe Clay, Jun 21 '16 at 15:53
Actually sorry, I don't have time to write up a full answer right now. The answers to this similar question should point you in the right direction though: http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call - the section about Promises, in particular, as that's the API that `$http` uses. — Joe Clay, Jun 21 '16 at 16:05
I am not quite following that. I am not quite following the concepts they are talking about in relation to my problem. — Peter, Jun 21 '16 at 16:41
Yeah, sorry, those answers were probably a bit too complex to be a good initial introduction to the concepts. The answer Debasish Mohapatra gave was a good one, glad someone was able to help you :) — Joe Clay, Jun 21 '16 at 20:02

score 1 · Accepted Answer · edited Jun 28 '16 at 22:16

In your factory do,

angular.module('starter.services', [])

.factory('Locations', function ($http, $q) {
    // Might use a resource here that returns a JSON array
        var url = "https://portal.mobilequbes.com/api/kiosks?callback=JSON_CALLBACK";
        var locations = [];  //storing locations for future usage

    return {
        all: function () {
            return $http.jsonp(url)
                .then(function (result) {
                    locations = result.data;
                    return result.data;
                });
        },
        get: function (locId) {
            for (i = 0; i < locations.length;i++){
                if (locations[i].friendlyName == parseInt(locId)) {
                    return locations[i];
                }
            }
        }
    }
});

And in your Controller,

.controller('MapCtrl', function ($scope, $http, Locations) {
    Locations.all().then(function (locations) {
         $scope.locations = locations;
    });
    $scope.createMarks = function () {
        createList(Locations.all());
    }
})

Now the Locations.all() method is returning a promise which will resolve to result.data in your controller and you can access locations.

Previously you are not returning anything so $scope.locations was undefined.

MohapatraI know this is quite late, but if I wanted to have the list I am pulling from url be used for get function, how would I do that? I tried using the same methodology but it returns nothing. — Peter, Jun 27 '16 at 14:47

Why is $http request not working in this Cordova Application?

1 Answers1