Question

这是一个有趣的问题。我正在使用一个简单的JSON Get请求来根据日期获得所有竞争，并将结果显示为列表。

JSON响应有点像：

[
{
"id":33
"competition":565 
},
{
"id":66
"competition":345
}
]

然后我应该再发一个json请求来获取每个json项的名称：

myserver.com/{id}

看起来像：

{
"name":"Serie A"
}

我希望根据日期显示我在第一个json请求中所有竞争名称的列表。

这是我的角度js代码，用于显示简单JSON请求的列表：

<div ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="m in matches">
    {{ m.id }}
  </li>
</ul>
</div>



<script>
var app = angular.module('starter', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://Myserver.com/matches?date=2015-05-19")
  .success(function (response) {$scope.matches = response;});
</script>

Answer 1

您可以迭代匹配并通过新的呼叫获取名称：

app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://myserver.com/matches?date=2015-05-19")
        .success(function (response) {
            $scope.matches = response;
            for (var i = 0; i < response.length; i++) {
                setName($scope.matches, i);
            }
        });

    var setName = function (matches, index) {
        $http.get("http://myserver.com/" + matches[index].id)
            .success(function (response) {
                matches[index].name = response.name;
            });
    }
});

Answer 2

下面的代码将首先获取所有比赛，然后使用他们的id s，它将并行地获取names所有事件。它将一次性为所有比赛提供详细信息。

警告：如果您有大量的竞争对手，那么它会拨打相同数量的电话来获取竞争详情。

＆＃13;

app.service('competition', function($http) {

  this.getAllCompetitions = function() {
    var baseUrl = 'http://Myserver.com';
    return $http.get(baseUrl + '/matches?date=2015-05-19')
      .then(function(allCompetitions) {
        /* sample `data`
          [
            {
                "id":33
                "competition":565 
            },
            {
                "id":66
                "competition":345
            }
          ]
        */
        var qArr = [];
        allCompetitions.forEach(function(competition, index) {
          var promise = $http.get(baseUrl + '/' + competition.id)
            .then(function(competitionDetail) {
              /* sample `competitionDetail`
                  {
                      "name":"Serie A"
                      "competition":565 
                  }
              */
              return {
                competitionDetail: competitionDetail,
                index: index
              };
            });
          aArr.push(promise);
        });

        return $q.all(qArr).then(function(listOfData) {
          listOfData.forEach(function(item) {
            allCompetitions[item.index] = angular.extend(allCompetitions[item.index], item.competitionDetail);
          });

          return allCompetitions;
        });
      });
  }

});

＆＃13;

如何制作几个JSON Get请求Angular JS

2 个答案: