Question

我应该如何使用angular.forEace访问URL json数组数据。我试图获取数据，但给出一些错误，请检查下面的代码我已添加

[{
   "flightsDepartur":[
        {
          "fare":"9,000",
          "route":[
            {
              "source":"Delhi",
            }
             ],
         },
     ]
  }]

        $http.get('data.json').then(function(response) {
            $scope.allData = response;
         },function(dataStatus){
             console.log(dataStatus);
         });

    angular.forEach($scope.allData, function(flidata) {
        angular.forEach(flidata[0].flightsDepartur, function(flidatIn) {
            console.log(flidatIn.fare);
        });
    });

Answer 1

检查以下内容以获取票价和路线数据

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = [{
   "flightsDepartur":[
        {
          "fare":"9,000",
          "route":[
            {
              "source":"Delhi",
            }
             ],
         },
     ]
  }];
  angular.forEach($scope.name, function(k,v) {
        angular.forEach(k, function(k,v) {
       console.log(k[0].fare);
       console.log(k[0].route[0].source)
    });
    });
});

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
  
  </body>

</html>

＆＃13;

Answer 2

问题是您是在承诺内为$scope.allData分配值。因为在为每个循环分配给$scope.allData的数据之前异步的javascript开始执行。当时$scope.allData未定义。所以它会产生错误。

创建一个函数并在promise中调用它以防止错误

$http.get('data.json').then(function(response) {
      $scope.allData = response.data;
      callLoop()
 },function(dataStatus){
      console.log(dataStatus);
 });

function callLoop(){
    angular.forEach($scope.allData, function(flidata) {
        angular.forEach(flidata.flightsDepartur, function(flidatIn) {
            console.log(flidatIn.fare);
        });
    });
}

Answer 3

尝试更改

angular.forEach(flidata[0].flightsDepartur, function(flidatIn) {..

到

angular.forEach(flidata.flightsDepartur, function(flidatIn) {..

并使用then函数来更改响应。

 $http.get('data.json').then(function(response) {
        $scope.allData = response.data;
     },function(dataStatus){
         console.log(dataStatus);
     });

<强>演示

var app = angular.module('anApp', []);
app.controller('ctrl', function($scope) {
  $scope.allData = [{
    "flightsDepartur": [{
      "fare": "9,000",
      "route": [{
        "source": "Delhi",
      }],
    }, ]
  }]

  angular.forEach($scope.allData, function(flidata) {
    angular.forEach(flidata.flightsDepartur, function(flidatIn) {
      console.log(flidatIn.fare);
      console.log(flidatIn.route[0].source);
    });
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<div ng-app="anApp" ng-controller="ctrl">

</div>

使用angular.forEach访问json数据

3 个答案: