Help with consuming the API using angularJS?

Question

Hi I was wondering if you can help with consuming this API through AngularJS. As an example, this is how I would consume a weather API from openweathermap.org:

$scope.weatherAPI = $resource("http://api.openweathermap.org/data/2.5/forecast/daily", { APPID: "822b2ab7395a69803904483f3b0c88a1",  
        callback: "JSON_CALLBACK"}, { get: {method: "JSONP" }});
    
    $scope.weatherResult = $scope.weatherAPI.get({ q: $scope.city, cnt: $scope.days });

The JSON result would be stored in $scope.weatherResult.

I tried this with the hearthstone API but I'm not getting any results:

$scope.hsAPI = $resource("https://omgvamp-hearthstone-v1.p.mashape.com/cards/Ysera", { APPID: "dVJU44ytXLmshouErewLVrdVLz7vp1iBmABjsnesQ5qSalYnqa",  
        callback: "JSON_CALLBACK"}, { get: {method: "JSONP" }});
		
	$scope.hsResult = $scope.hsAPI.get();

I'm fairly new to AngularJS and consuming APIs in general so I'm sorry if this is a dumb question. Thanks.

msuarin · Answer

Thanks man! I changed a few things there but that worked for me!

omgvamp · Answer

Disregard my previous message. You'll have to do it slightly different since you can't pass your Mashape API key when using JSONP. This is the correct solution:

    function card($scope, $http) {
        $http.get('https://omgvamp-hearthstone-v1.p.mashape.com/cards/Ysera?callback=JSON_CALLBACK', {
		    headers: { 'X-Mashape-Key': 'MASHAPE_API_KEY_GOES_HERE' }
	    }).success(function(data) {
            console.log(data);
        });
    }

omgvamp · Answer

Hi!

This should work:

    $http.jsonp('https://omgvamp-hearthstone-v1.p.mashape.com/cards/Ysera?callback=JSON_CALLBACK')
    .success(function(data) { 
        console.log(data); 
    });

Of course you still have to pass your API key etc.

Hearthstone

9.7 / 10

2,205ms

99%

N/A

Help with consuming the API using angularJS?