根据json响应显示表

Show table depending on json response

本文关键字：显示 响应 json 根据      更新时间：2023-09-26

我有一个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;
        }
    });
});

如何根据数据动态显示表？由于销售表将包含2列，而税务表将包含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>

税务表

<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>

如何使用相同的控制器TableCtrl根据条件显示不同的表？

在控制器中，将数据分离到$scope.sales和$scope.tax:

if(response.data.Sales != null){
    $scope.sales = response.data.Sales;
    $scope.tax = null;
}
if(response.data.Tax != null){
    $scope.tax = response.data.Tax;
    $scope.sales = null;
}

然后，在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>

如果您有一组固定类型，如Sales、Tax等，那么提供的像@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>

此处的示例：http://jsbin.com/pafanuwoka/edit?html，js，输出

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

如果这在您的应用程序中很常见，您可能应该考虑将其作为指令添加。此处的示例：http://jsbin.com/gayirinifo/edit?html，js，输出

相关文章：