Steam Web API in Angular JS: Issue with the GetAppList JSON and $http.jsonp

Question

I hope you are well. I am working on a project that involves working with the Steam Web API in angular JS. I am trying to fetch the data from this URL:

http://api.steampowered.com/ISteamApps/GetAppList/v2

When I run my code in Google Chrome it shows:

Uncaught SyntaxError: Unexpected token :

I know that there's this issue with CORS(and some sites not playing nice with it so I am trying to work around that using JSONP. Is there something that I am missing or doing wrong?

Kind regards,

Adi

Here's the relevant snippets of code (I have excluded my API Key per the Steam Web API terms):

var steam_api = "https://api.steampowered.com/ISteamApps/GetAppList/v2";
steam_api += "?key=mySteamKey";
steam_api += "&format=json&callback=JSON_CALLBACK";

$scope.steamGames = {};
  $http.jsonp(steam_api)
  .success(function(data, status, headers, config){

    console.log(data);
    $scope.steamGames = JSON.parse($scope.rawData);
    $scope.steamSearch = document.getElementById('Search').value;

  });

Edit: Just for clarity I have also checked with a JSON validator and the JSON that it spews out is valid.

In terms of the error message that's as much as Chrome's developer console will show. — Adi Khajuria, Nov 30 '16 at 19:26
I don't know if this helps but when I add &jsonp=? at the end of steam_api the error dissappears. Good as this might sound, I did a few console.log lines and they confirm that it's actually skipping my .success function. I take the &jsonp out and the unexpected token error displays once again. What could this mean? — Adi Khajuria, Dec 01 '16 at 10:56
Then I'm guessing the server doesn't allow jsonp Check this: http://stackoverflow.com/a/33333530/4255034 — Ladmerc, Dec 01 '16 at 11:47
Well if that's the case then I am up against a brick wall here. It seems that Steam's Web API does not allow cross origin requests either which could mean that it might not be possible for me to do it in Angular. Do you reckon it might be worth me doing it on the server side instead of the client with NodeJS? — Adi Khajuria, Dec 01 '16 at 12:02

Adi Khajuria · Accepted Answer · 2017-03-17T10:41:58.183

We have an answer. Steam's API does not allow you to send requests to it using CORS (as it does not allow cross origin requests). If you send it via JSONP then you get the unexpected token error like I did. However, there is still hope.

Using a tutorial on CodePen I was able to make the request to the Steam Web API(using my server written in NodeJS) and capture the JSON from the response in a variable. My next course of action will be to somehow send that variable to Angular JS and get the right values out of it using the ng-repeat directive in my HTML. Thanks everyone for your help.

Edit: Here's the link to the CodePen tutorial along with the required nodeJS/ExpressJS code: https://codepen.io/johnchristopherjones/post/how-do-i-use-the-steam-api-in-my-web-app

app.get('/steam/civ5achievements', function(httpRequest, httpResponse) {
    // Calculate the Steam API URL we want to use
    var url = 'http://api.steampowered.com/ISteamUserStats/GetSchemaForGame/' +
        'v2/?key=YOURSTEAMAPIKEYHERE&appid=8930';
    request.get(url, function(error, steamHttpResponse, steamHttpBody) {
        // Once we get the body of the steamHttpResponse, send it to our client
        // as our own httpResponse
        httpResponse.setHeader('Content-Type', 'application/json');
        httpResponse.send(steamHttpBody);
    });
});

Steam Web API in Angular JS: Issue with the GetAppList JSON and $http.jsonp

1 Answers1