angularjs中的嵌套json循环

时间:2016-12-25 06:33:02

标签: angularjs node.js

我在下面给出了一个json

var returnObj = {
      "subscriptions": [
     {
      "subscriptionId": "ef94e4226e2b1a3c218ae5bd07273726",
      "productId": "WBP",
      "plans": [
        {
          "planId": "WBP_INCL_UPDATES",
          "attributes": [
            {
              "vintage": "2016-10",
              "url": "https://google.com",
              "release": "0.0.0",
              "expiredOn": "2016-12-23T07:33:18.093+0000"
            },
            {
              "vintage": "2016-11",
              "url": "https://yahoo.com",
              "release": "0.0.0",
              "expiredOn": "2016-12-23T07:33:18.094+0000"
            }
          ]
        }
      ]
    },
    {
      "subscriptionId": "ee94e4226e2b1a3c218ae5bd07273726",
      "productId": "POI",
      "plans": [
        {
          "planId": "POI_ARG",
          "attributes": []
        }
      ]
    }
  ]
};

我想以angularJS表格格式显示输出,如下所示

名称网址

WBP https://google.com

WBP https://yahoo.com

1 个答案:

答案 0 :(得分:0)

希望这有助于你

var returnObj = {
      "subscriptions": [
     {
      "subscriptionId": "ef94e4226e2b1a3c218ae5bd07273726",
      "productId": "WBP",
      "plans": [
        {
          "planId": "WBP_INCL_UPDATES",
          "attributes": [
            {
              "vintage": "2016-10",
              "url": "https://google.com",
              "release": "0.0.0",
              "expiredOn": "2016-12-23T07:33:18.093+0000"
            },
            {
              "vintage": "2016-11",
              "url": "https://yahoo.com",
              "release": "0.0.0",
              "expiredOn": "2016-12-23T07:33:18.094+0000"
            }
          ]
        }
      ]
    },
    {
      "subscriptionId": "ee94e4226e2b1a3c218ae5bd07273726",
      "productId": "POI",
      "plans": [
        {
          "planId": "POI_ARG",
          "attributes": []
        }
      ]
    }
  ]
};


var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
   $scope.rows = []; 
  returnObj.subscriptions.forEach(function(subscription){
     subscription.plans.forEach(function(plan){
       plan.attributes.forEach(function(attribute){
         $scope.rows.push({name: subscription.productId, url: attribute.url});
       });
     });
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr><td>Name</td><td>URL</td></tr>
  <tr ng-repeat="row in rows">
    <td>{{ row.name }}</td>
    <td>{{ row.url }}</td>
  </tr>
</table>

</div>