Javascript 根据json响应显示表

我有一个json数据，其中包含参数数组，如Sales、Tax等。单击一个页面中的特定参数，登录页面应该显示该特定参数的表

{
    "Sales": [
        {
            "Date": "2015-08-01 23:35:15.652",
            "Val": 78
        },
        {
            "Date": "2015-08-01 22:35:15.652",
            "Val": 82
        },
        {
            "Date": "2015-08-01 21:35:15.652",
            "Val": 80
        },
        {
            "Date": "2015-08-01 21:15:15.652",
            "Val": 100
        },
        {
            "Date": "2015-07-27 12:57:15.652",
            "Val": 94
        }
    ],

"Tax": [
        {
            "Date": "2015-08-01 23:35:15.652",
            "Min": 78,
            "Max":150
        },
        {
            "Date": "2015-08-01 22:35:15.652",
            "Min": 50,
            "Max":120
        },
        {
            "Date": "2015-08-01 21:35:15.652",
            "Min": 65,
            "Max":150
        },
        {
            "Date": "2015-08-01 21:25:15.652",
            "Min": 70,
            "Max":190
        },
        {
            "createdOn": "2015-08-01 21:15:15.652",
            "Min": 90,
            "Max":200
        }
    ]
}

我的控制器

angular.module('starter.controllers', [])
.controller('TableCtrl','$scope', '$http', function($scope, $http) {
    $http.get('js/data.json').success(function(response){
        if(response.data.Sales!=null){
          $scope.data =response.data.Sales;
        }
       if(response.data.Tax!=null){
          $scope.data =response.data.Tax;
        }
    });
});

如何从数据动态显示表？因为Sales表将包含2列，Tax表将包含3列。 销售表

<table ng-controller="TableCtrl">
            <thead>
                <th>
                  <td>Date</td>
                  <td>Value</td>
                </th>
            </thead>    
            <tbody>
                <tr ng-repeat="item in data">
                    <td>{{item.Date}}</td>
                    <td>{{item.Val}}</td>
                </tr>
            </tbody>
        </table>

日期
价值
{{item.Date}
{{item.Val}}

税表

<table ng-controller="TableCtrl">
                <thead>
                    <th>
                      <td>Date</td>
                      <td>Min</td>
                      <td>Max</td>
                    </th>
                </thead>    
                <tbody>
                    <tr ng-repeat="item in data">
                        <td>{{item.Date}}</td>
                        <td>{{item.Min}}</td>
                        <td>{{item.Max}}</td>
                    </tr>
                </tbody>
            </table>

日期
分钟
马克斯
{{item.Date}
{{item.Min}
{{item.Max}

---

如何使用同一控制器TableCtrl？

根据条件显示不同的表在控制器中，将数据分为$scope.sales和$scope.tax：

然后，在html中使用ng if指令：

<div ng-controller="TableCtrl">
    <table ng-if = "sales">
        <thead>
            <th>
              <td>Date</td>
              <td>Value</td>
            </th>
        </thead>    
        <tbody>
            <tr ng-repeat="item in sales">
                <td>{{item.Date}}</td>
                <td>{{item.Val}}</td>
            </tr>
        </tbody>
    </table>

    <table ng-if = "tax">
        <thead>
            <th>
                <td>Date</td>
                <td>Min</td>
                <td>Max</td>
            </th>
        </thead>    
        <tbody>
            <tr ng-repeat="item in tax">
                <td>{{item.Date}}</td>
                <td>{{item.Min}}</td>
                <td>{{item.Max}}</td>
            </tr>
        </tbody>
    </table>
</div>

日期
价值
{{item.Date}
{{item.Val}}
日期
分钟
马克斯
{{item.Date}
{{item.Min}
{{item.Max}

如果您有一组固定类型，如销售、税务等，则可以使用@Majid等硬编码版本。但是，您可以制作一个更动态的版本，其中表根据提供的json数组进行调整

考虑以下数据：

var data={
    "Sales": [
        {
            "Date": "2015-08-01 23:35:15.652",
            "Val": 78
        },
        {
            "Date": "2015-08-01 22:35:15.652",
            "Val": 82
        },
        {
            "Date": "2015-08-01 21:35:15.652",
            "Val": 80
        },
        {
            "Date": "2015-08-01 21:15:15.652",
            "Val": 100
        },
        {
            "Date": "2015-07-27 12:57:15.652",
            "Val": 94
        }
    ],

"Tax": [
        {
            "Date": "2015-08-01 23:35:15.652",
            "Min": 78,
            "Max":150
        },
        {
            "Date": "2015-08-01 22:35:15.652",
            "Min": 50,
            "Max":120
        },
        {
            "Date": "2015-08-01 21:35:15.652",
            "Min": 65,
            "Max":150
        },
        {
            "Date": "2015-08-01 21:25:15.652",
            "Min": 70,
            "Max":190
        },

    ],
"Inventory": [
        {
            "Type": "Car",
            "Amount": 100,

        },
        {
            "Type": "Bike",
            "Amount": 32,

        },
        {
            "Type": "Shoes",
            "Amount": 677,

        },
    ]
};

控制器：

function mainCtrl() {
  this.data=data;
}
angular
    .module('app', [])
    .controller('mainCtrl', mainCtrl);

下面的html代码现在将使用每个数组中的第一个对象打印出属性名称，然后将数组中的每个对象相应地打印到表中

<body ng-controller="mainCtrl as main">
  <div ng-repeat="(name, table) in main.data">
    <h3>{{name}}</h3>
    <table>
      <thead>
        <tr>
          <!-- Iterate and print field names -->
          <th ng-repeat="(key, value) in table[0]">{{key}}</th>
        </tr>
      </thead>
      <tbody>
        <!-- Print rows -->
        <tr ng-repeat="row in table">
          <td ng-repeat="value in row">{{value}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

{{name}}
{{key}}
{{value}}

现场示例如下：

使用此解决方案时，您需要确保每个数组中的所有对象都是相同的，因为我们正在打印每个数组中第一个对象的字段名。但您也可以将更多json数组添加到数据字段中

---

如果这是应用程序中常见的情况，您应该考虑将此作为指令添加。示例：

我认为您的ng if语句在逻辑上不正确。

<body ng-controller="mainCtrl as main">
  <div ng-repeat="(name, table) in main.data">
    <h3>{{name}}</h3>
    <table>
      <thead>
        <tr>
          <!-- Iterate and print field names -->
          <th ng-repeat="(key, value) in table[0]">{{key}}</th>
        </tr>
      </thead>
      <tbody>
        <!-- Print rows -->
        <tr ng-repeat="row in table">
          <td ng-repeat="value in row">{{value}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>