Question

我必须合并来自三个不同来源的数据。理想情况下，我会在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} );
    }

});

Answer 1

根本问题是你正在进行异步请求，然后尝试同步操作它们的返回。在您尝试访问它时，返回数据尚未到达。

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

Demo

从then回调内部访问数据非常重要，一旦所有三个请求都返回，这将会触发。

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

AngularJS $q docs

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

1 个答案: