javascript - 在 AngularJS 中聚合对象

Question

所以，我正在尝试使用 AngularJS，并且作为练习，我想我会使用 Steam API 制作一个简单的应用程序。我做了一个简单的 Spring Boot Rest 服务，它为 Steam API 提供反向代理服务，以这种方式可以转发某些调用。这时候有两个 Action :

/user/ 提供了一个 steam id 的列表。/user/:id/games 提供以下 api 的输出: http://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=MY_STEAM_KEY&steamid=STEAM_ID&format=json

返回以下格式的答案:

{  
   "response":{  
      "game_count":3,
      "games":[  
         {  
            "appid":70000,
            "playtime_forever":0
         },
         {  
            "appid":550,
            "playtime_forever":0
         },
         {  
            "appid":274900,
            "playtime_forever":0
         }
      ]
   }
}

我想要实现的是从这个 json 对象中提取 games 数组，并将其附加到正确的用户。我想为所有用户这样做。通过定义以下工厂，我使用 $resource 对象实现了接近我想要的东西:

angular.module("SAM.Resources", [])
    .factory("UserList", ["$resource",
        function ($resource) {
            return $resource('/user');
        }])

    .factory("GamesList", ["$resource",
        function ($resource) {
            return $resource('/user/:id/games', {
                id: '@id'
            });
        }
    ]);

然后在我的 Controller 中使用以下内容:

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

这接近于我想要的，但是，它返回的格式如下:

  {
    "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
          }
        ]
      }
    }
  }

而且我不想要 games.response.games 结构。我试图将其更改为:

$scope.users[index].games = GamesList.get({id:user.id}).response.games;

它失败了，看起来合乎逻辑，因为它是一个 promise ，并且不会立即包含响应对象。

我也试过用类似的东西

GamesList.get({id:user.id}), function(response){
 angular.extend(user, response);
});

它确实将响应附加到 user 对象，只有 user 对象始终是 promise 解析时数组中的最后一个值。

所以基本上我的问题归结为:如何使用 Games 列表扩展我的 User 对象？

Answer 1

您需要稍微更改一下代码:

UserList.query(function(response){
    $scope.users = response ? response : [];
    for(index=0; index < $scope.users.length; ++index){
        user = $scope.users[index];

        (function(index, id){
            GamesList.get({id: id}, function(response){ // Get the games from the response
                $scope.users[index].games = response.response.games;
            }));
        })(index, user.id)
    }
});

在for 循环中，user 不断改变值。当第一个 GameList.get 返回值时，您的循环将已经到达最后一个用户。

将其包装在 IIFE 中将这些变量分隔在一个单独的范围内。