Currently, I am exploring AngularJS and decided to create a simple application using the Steam API as a practice exercise. To achieve this, I have developed a basic Spring Boot Rest service that acts as a reverse proxy for the Steam API, allowing specific calls to be forwarded. At this point, there are two main actions:
/user/ provides a list of Steam IDs.
/user/:id/games retrieves data from the following API endpoint:
The response from the API is in the following JSON format:
{
"response":{
"game_count":3,
"games":[
{
"appid":70000,
"playtime_forever":0
},
{
"appid":550,
"playtime_forever":0
},
{
"appid":274900,
"playtime_forever":0
}
]
}
}
My goal is to extract the games array from this JSON object and add it to the respective user. This process needs to be repeated for all users. I've made some progress by utilizing the $resource object and creating the following factories:
angular.module("SAM.Resources", [])
.factory("UserList", ["$resource",
function ($resource) {
return $resource('/user');
}])
.factory("GamesList", ["$resource",
function ($resource) {
return $resource('/user/:id/games', {
id: '@id'
});
}
]);
In my controller, I'm implementing the following approach:
UserList.query(function(response){
$scope.users = response ? response : [];
for(index=0; index < $scope.users.length; ++index){
user = $scope.users[index];
$scope.users[index].games = GamesList.get({id:user.id});
}
});
While this setup is close to what I intend to achieve, it currently returns results in the format:
{
"id": "76561198119953061",
"name": "Yuri",
"games": {
"response": {
"game_count": 3,
"games": [
{
"appid": 70000,
"playtime_forever": 0
},
{
"appid": 550,
"playtime_forever": 0
},
{
"appid": 274900,
"playtime_forever": 0
}
]
}
}
}
However, I want to remove the extra layer of games.response.games. While attempting to address this issue, changing it to:
$scope.users[index].games = GamesList.get({id:user.id}).response.games;
resulted in failure since it's a promise and doesn't immediately contain the response object.
I also tried something like
GamesList.get({id:user.id}), function(response){
angular.extend(user, response);
});
This implementation successfully adds the response to the user object, but the user object is always the last value in the array when the promise resolves.
Therefore, my main question boils down to: How can I enhance my User object with the Games list?