AngularJS与结果相结合，从JSON到一个控制器/视图 [英] AngularJS Combine Results from JSON into One Controller/View

问题描述

我必须将数据从三个不同来源的结合。理想情况下，我会做这样的Web服务器上，但我不得不使用JSON文本文件，在这个时候，直到别人都ppared支持Web服务调用$ P $。因此，我有我需要遍历和处理数据的第3页JSON文件。

我的问题是一个结构，我最初得到，是不是在我的控制器中，我知道这应该被移动到不同的控制器来处理数据稍后公布，并有可能利用工厂/服务，但我想做概念验证试玩可用外观/ presentation拿到批文构建应用程序。因此，快速和肮脏需要简单地获得批准，我们再破它，并做适当的，从一开始就内置测试。

我的code：

  VAR应用= angular.module（'应用'，[]）;App.controller（Ctrl键，功能（$范围，$ 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（数据/ JSON1.json'）。成功（功能（数据）{
        $ scope.JSON1 =数据;
    }）;    $ http.get（数据/ JSON2.json'）。成功（功能（数据）{
        $ scope.JSON2 =数据;
    }）;    $ http.get（数据/ JSON3.json'）。成功（功能（数据）{
        $ scope.JSON3 =数据;
    }）;    //创建的结果结构
    VAR标题= [];
    对于（VAR I = 0; I＆LT; Structure.length;我++）
    {
        //从Stucture的列值
        Headers.push（结构[I]）;
    }
    $ scope.Data [0] = [];
    $ scope.Data [0] .push（头）;    //从JSON1 ID字段获取密钥的每一行
    // JSON1的长度现在为0  - 这是错误
    对于（VAR I = 0; I＆LT; $ scope.JSON1.length;我++）
    {
        VAR键= $ scope.JSON1 [I] .ID;
        $ scope.Data [关键] = [];
    }    //从JSON2键字段获取密钥为每一行从JSON1匹配ID
    对于（VAR I = 0; I＆LT; $ scope.JSON2.length;我++）
    {
        VAR记录= $ scope.JSON2 [I]
        $ scope.Data [Record.Key] .push（{日期1：Record.Data1}）;
    }}）;
 

解决方案

的根本问题是，你正在做异步请求，然后试图对他们的回报同步操作。在那里你试图访问点，返回的数据还没有到达。

的 $ Q 库将帮助你解决这个问题，以及你问的人。您可以使用 $ q.all 与返回的数据工作前，等待所有三个响应。

例如：

  .controller（'myController的'，函数（$范围，$ HTTP，$ Q）{
  变种JSON1 = $ http.get（'example1.json'）;
  变种JSON2 = $ http.get（'example2.json'）;
  变种JSON3 = $ http.get（'example3.json'）;  $ q.all（[JSON1，JSON2，JSON3]），然后（功能（结果）{
    $ scope.combined = [];
    angular.forEach（结果，功能（结果）{
      $ scope.combined.push（result.data）;
    }）;
    //数据设置范围var和将出现在视图
    //你需要任何其他与现在这里的数据，它已经到来
  }）
}）
 

演示

您从然后的回调，这将会触发一次所有三个请求已经返回内部访问这些数据是非常重要的。

该解决方案不处理错误/拒绝承诺，但你问的快速和肮脏。另外，有丰富的资源在那里，可以帮助您了解更多有关承诺。

AngularJS $ Q文档

I have to combine the data from three different sources. Ideally, I would do this on the web server, but I have to use JSON text files at this time until others are prepared to support the web service calls. As such, I have 3 JSON files that I need to loop through, and process the data for a page.

My problem is that the one structure I am getting initially, is not available later in my controller to process the data in. I know this should be moved to different controllers, and likely use factories/services, but I am trying to do a Proof of Concept to demo the available look/presentation to get approval to build the application. As such, quick and dirty is needed to simply get the approval for us to then break it and do it proper, with testing built in from the start.

My code:

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

});

解决方案

The fundamental issue is that you're making asynchronous requests and then trying to operate on their returns synchronously. At the point where you're attempting to access it, the return data has not yet arrived.

The $q library will help you to solve that problem as well as the one you're asking about. You can use $q.all to wait for all three responses before working with the returned data.

Example:

.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

It's important that you access the data from inside of the then callback, which will fire once all three requests have returned.

This solution does not handle errors / rejected promises, but you asked for quick and dirty. Plus, there are plenty of resources out there to help you learn more about promises.

AngularJS $q docs

这篇关于AngularJS与结果相结合，从JSON到一个控制器/视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！