How to access external resource (JSON DATA) via $resource in AngularJS

Question

I'm trying to retrieve weather data from openweathermap.org (JSON) ,

this is my service code:

weatherApp.service('forecastService', [ '$resource', '$sce', function 
 ($resource, $sce) {

    this.getWeather = function (city, numDays){

        var key = 'b3cc85931eae059522f3a9b8c5260f6e';

        var link = function() {
           return $sce.trustAsResourceUrl("http://api.openweathermap.org/data/2.5/forecast/");
        };

        var weatherAPI = $resource(link(), { callback: "JSON_CALLBACK" }, { get: { method: "JSONP" }});

        var weatherResult = weatherAPI.get({ q: city, cnt: numDays, appid: key });

        return weatherResult;
    };

}]);

this is my controller code:

weatherApp.controller('forecastController', ['$scope', '$log', 'forecastService', function($scope, $log, forecastService) {

    $log.info(forecastService.getWeather('Davao City', '5'));

}]);

Kept on getting this error, please help T_T

angular.min.js:123 TypeError: c.split is not a function
    at C.setUrlParams (http://127.0.0.1:50003/core-js/angular-resource.min.js:12:269)
    at Function.l.(anonymous function) [as get] (http://127.0.0.1:50003/core-js/angular-resource.min.js:10:156)
    at Object.getWeather (http://127.0.0.1:50003/project-js/forecast.factory.js:14:40)
    at new <anonymous> (http://127.0.0.1:50003/project-js/forecast.controller.js:3:31)
    at Object.instantiate (http://127.0.0.1:50003/core-js/angular.min.js:44:272)
    at http://127.0.0.1:50003/core-js/angular.min.js:94:141
    at Object.link (http://127.0.0.1:50003/core-js/angular-route.min.js:7:322)
    at http://127.0.0.1:50003/core-js/angular.min.js:17:3
    at ra (http://127.0.0.1:50003/core-js/angular.min.js:85:35)
    at n (http://127.0.0.1:50003/core-js/angular.min.js:70:226) "<div ng-view="" class="ng-scope">"

Hide your secret

btlm
– btlm

2017-05-30 06:48:57 +00:00
Commented May 30, 2017 at 6:48 — btlm
– btlm, Commented May 30, 2017 at 6:48
I can just disable or create a new key anyways

Rich Cuer
– Rich Cuer

2017-05-30 06:51:40 +00:00
Commented May 30, 2017 at 6:51 — Rich Cuer
– Rich Cuer, Commented May 30, 2017 at 6:51

ricardo · Accepted Answer · 2018-12-12 11:56:06Z

1

I know it is too late, but I just had the same question as you did and solved.

I think the issue comes from using trustAsResourceUrl, it passes the url as undefined when angular tries to split it, it gives an error.

I just added the openweathermap domain to the whitelist and then create the resource without trustAsResourceUrl:

weatherApp.config(function($sceDelegateProvider){
    $sceDelegateProvider.resourceUrlWhitelist([
   // Allow same origin resource loads.
   'self',
   // Allow loading from openweathermap
   'http://api.openweathermap.org/**']);
});

And then create the resource:

$scope.weatherAPI = $resource("http://api.openweathermap.org/data/2.5/forecast", {get: {method: "JSONP"}});

Notice that I removed the { callback: "JSON_CALLBACK" }, it was causing another error.

Regards.

answered Dec 12, 2018 at 11:56

ricardo

265 bronze badges

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

Collectives™ on Stack Overflow

How to access external resource (JSON DATA) via $resource in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related