Show table depending on json response

Question

I have a json data with arrays of parameters like Sales, Tax etc. On click of a particular parameter from one page, the landing page should show the table for that particular parameter.

{
    "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
        }
    ]
}

My controller

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;
        }
    });
});

How do I show table dynamically from the data? Since Sales table will contain 2 columns and Tax table will contain 3 columns. Table for Sales

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

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

How to display different tables based on condition using same Controller, TableCtrl?

score 1 · Answer 1 · answered Nov 14 '15 at 10:36

In your controller, separate data into $scope.sales and $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;
}

Then, in html use ng-if directive:

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

I think your ng-if statement is not correct, logically. – Vinit Desai Nov 17 '15 at 19:14 — Vinit Desai, Nov 17 '15 at 19:14

cbass · Answer 2 · 2015-11-14T11:11:20.183

If you have a set of fixed types such as Sales, Tax etc., the hard coded version like @Majid provided is fine. However, you could make a more dynamic version where the table adjusts to the json arrays provided.

Consider the following data:

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,

        },
    ]
};

Controller:

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

The below html code will now use the first object in each array to print out the property names, and then print each object from the array into to the table accordingly.

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

Live example here: http://jsbin.com/pafanuwoka/edit?html,js,output

Having this solution you need to make sure that all objects in each array are alike as we are printing the field names from the first object in each array. But you are also able to add more json arrays into data field.

If this is a common occurrence in your application, you should probably consider adding this as a directive. Example here: http://jsbin.com/gayirinifo/edit?html,js,output

Show table depending on json response

2 Answers2