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.

Answer 1

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);
    });
});