AngularJS将JSON的结果合并到一个控制器/视图中

我必须结合三个不同来源的数据。理想情况下，我会在web服务器上执行此操作，但此时我必须使用JSON文本文件，直到其他人准备好支持web服务调用为止。因此，我有3个JSON文件需要循环使用，并处理一个页面的数据

我的问题是，我最初得到的一个结构，以后在我的控制器中无法处理其中的数据。我知道这应该转移到不同的控制器，可能会使用工厂/服务，但我正在尝试进行概念验证，以演示可用的外观/演示，以获得构建应用程序的批准。因此，我们需要快速而肮脏地获得批准，然后打破它并正确地执行它，从一开始就内置测试

我的代码：

var App = angular.module('App', []);

App.controller('Ctrl', function ($scope, $http)
{
    $scope.ToPlay = 0;
    $scope.Won    = 0;
    $scope.Lost   = 0;

    var Structure = [ "Col1", "Col2", "Col3" ];

    $scope.Data  = [];
    $scope.JSON1 = [];
    $scope.JSON2 = [];
    $scope.JSON3 = [];

    // Read the 3 files for processing
    $http.get('Data/JSON1.json').success(function(data) {
        $scope.JSON1 = data;
    });

    $http.get('Data/JSON2.json').success(function(data) {
        $scope.JSON2 = data;
    });

    $http.get('Data/JSON3.json').success(function(data) {
        $scope.JSON3 = data;
    });

    // Create Structure in Result
    var Headers = [];
    for( var i = 0; i < Structure.length; i++)
    {
        // Get the Value from Stucture for Columns
        Headers.push(Structure[i]);
    }
    $scope.Data[0] = [];
    $scope.Data[0].push(Headers);

    // Get Key from JSON1 ID Field for Each Row
    // Length of JSON1 is now 0 - This is the error
    for( var i = 0; i < $scope.JSON1.length; i++)
    {
        var Key = $scope.JSON1[i].Id;
        $scope.Data[Key] = [];
    }

    // Get Key from JSON2 Key Field for Each Row matches ID from JSON1
    for( var i = 0; i < $scope.JSON2.length; i++)
    {
        var Record = $scope.JSON2[i];
        $scope.Data[Record.Key].push({ "Date1": Record.Data1} );
    }

});

var-App=angular.module（'App'，[]）；
App.controller（'Ctrl'，函数（$scope，$http）
{
$scope.ToPlay=0；
$scope.Won=0；
$scope.Lost=0；
var结构=[“Col1”、“Col2”、“Col3”]；
$scope.Data=[]；
$scope.JSON1=[]；
$scope.JSON2=[]；
$scope.JSON3=[]；
//读取3个文件进行处理
$http.get（'Data/JSON1.json'）.success（函数（数据）{
$scope.JSON1=数据；
});
$http.get（'Data/JSON2.json'）.success（函数（数据）{
$scope.JSON2=数据；
});
$http.get（'Data/JSON3.json'）.success（函数（数据）{
$scope.JSON3=数据；
});
//在结果中创建结构
var头=[]；
对于（var i=0；i

最基本的问题是，您正在发出异步请求，然后尝试同步处理它们的返回。在您试图访问它时，返回数据尚未到达

$q

库将帮助您解决这个问题，以及您正在询问的问题。在处理返回的数据之前，您可以使用

$q.all

等待所有三个响应

例如：

.controller('MyController', function($scope, $http, $q){
  var JSON1 = $http.get('example1.json');
  var JSON2 = $http.get('example2.json');
  var JSON3 = $http.get('example3.json');

  $q.all([JSON1, JSON2, JSON3]).then(function(results){
    $scope.combined = [];
    angular.forEach(results, function(result){
      $scope.combined.push(result.data);
    });
    // Data set to scope var and will appear in view
    // Do whatever else you need to with the data here now that it has arrived
  })
})

从

内部访问数据非常重要，然后从
回调中访问数据，这将在所有三个请求返回后触发

此解决方案不会处理错误/拒绝的承诺，但您要求快速和肮脏。此外，还有很多资源可以帮助您了解更多关于承诺的信息

谢谢您的回复。我有一些问题，但我认为这将是我，因为你的例子看起来很清楚。我用我的示例更新了一个plunkr：查看我在其中评论的代码。非常感谢，这帮助我理解了这个问题。现在我可以使用代码，并获得错误处理等。。。再次感谢您的帮助。您注意到Ids[]数组没有被使用吗？从未打印过该名称。在example1.json“id”->“id”中键入错误：