javascript - 调用将多个 JSON 文件编译为一个

Question

现在，这可能是理论问题，因为我仍在学习 AngularJS，请原谅我的愚蠢。

有没有一种方法可以让 Angular 从不同的位置调用 3 个 json 文件，并且它们都具有相同的布局，然后通过一次调用将其“编译”或“加载”为一个，以增加加载时间？

假设我们有 3 个 json 文件:

第一个 JSON 文件:

{
   "name": "John",
   "sur": "Smith"
}

第二个 JSON 文件:

{  
   "name": "John", 
   "sur": "Doe"
}

第三个 JSON 文件:

{
    "name": "Alice",
    "sur": "Mulder"
}

使用ng-repeat调用并显示它们的最有效、最快的方法是什么？理论上，在我们决定使用表达式将它们输入 html 之前，可以将它们编译到一个“临时 json 文件”中吗？

Answer 1

最终您将希望将单个数组绑定(bind)到您的 View 。这个ng-repeat将迭代数组中的每个项目，并将每个对象漂亮地打印到 <pre/> 中:

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-repeat="entry in entries">
      <pre ng-bind="entry | json"></pre>
    </div>
  </div>
</div>

开始3 $http.get()并发请求(显然您可以将它们更改为 file1.json 、 file2.json 等)。

每个$http.get() promise 给我们一个 response对象完成时。我们实际上想要response.data相反(给我们响应，解析为 JSON)，所以 Array.prototype.map()你对response的每一个 promise 这样它就变成了对 response.data 的 promise 。 .

然后使用 $q.all()等待所有这些 promise 完成。

一旦$q.all() Promise 完成:我们有了 JSON 响应数组。将该模型添加到我们的 $scope .

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

myApp.controller('MyCtrl', function($scope, $http, $q) {
    $q.all(
      [
      $http.get('https://httpbin.org/get'),
      $http.get('https://httpbin.org/get'),
      $http.get('https://httpbin.org/get')
      ]
      .map(function(promise) {
        return promise
        .success(function(response) {
            return response.data;
        })
      })
    )
    .then(function(multipleJson) {
        $scope.entries = multipleJson;
    })
});

Plunkr here .