Plunker sample

How to hide table column if all json value is null for any property using angular js

index.js

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.isArray = angular.isArray;
  $scope.data = [{
    "Id": null,
    "Title": "US",
    "Description": "English - United States",
    "Values": [{
      "Id": 100,
      "LanId": 1,
      "KeyId": 59,
      "Value": "Save"
    }]
  }, {
    "Id": null,
    "Title": "MX",
    "Description": "test",
    "Values": [{
      "Id": 100,
      "LanId": 1,
      "KeyId": 59,
      "Value": "Save"
    }]
  }, {
    "Id": null,
    "Title": "SE",
    "Description": "Swedish - Sweden",
    "Values": [{
      "Id": 100,
      "LanId": 1,
      "KeyId": 59,
      "Value": "Save"
    }]
  }]
  $scope.cols = Object.keys($scope.data[0]);
  $scope.notSorted = function(obj) {
    if (!obj) {
      return [];
    }
    return Object.keys(obj);
  }
});

index.html

<table border=1 style="margin-top: 0px !important;">
  <thead>
    <tr>
      <th ng-repeat="(k,v) in data[0]">{{k}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in data">
      <td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)">
        <table ng-if="isArr" border=1>
          <thead>
            <tr>
              <td>
                <button ng-click="expanded = !expanded" expand>
                  <span ng-bind="expanded ? '-' : '+'"></span>
                </button>
              </td>
            </tr>
            <tr>
              <th ng-repeat="(sh, sv) in value[0]">{{sh}}</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="sub in value" ng-show="expanded">
              <td ng-repeat="(sk, sv) in sub">{{sv}}</td>
            </tr>
          </tbody>
        </table>
        <span ng-if="!isArr">{{value}}</span>
      </td>
    </tr>
  </tbody>
</table>

Plunker sample

How to hide table column if all json value is null for any property using angular js

index.js

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.isArray = angular.isArray;
  $scope.data = [{
    "Id": null,
    "Title": "US",
    "Description": "English - United States",
    "Values": [{
      "Id": 100,
      "LanId": 1,
      "KeyId": 59,
      "Value": "Save"
    }]
  }, {
    "Id": null,
    "Title": "MX",
    "Description": "test",
    "Values": [{
      "Id": 100,
      "LanId": 1,
      "KeyId": 59,
      "Value": "Save"
    }]
  }, {
    "Id": null,
    "Title": "SE",
    "Description": "Swedish - Sweden",
    "Values": [{
      "Id": 100,
      "LanId": 1,
      "KeyId": 59,
      "Value": "Save"
    }]
  }]
  $scope.cols = Object.keys($scope.data[0]);
  $scope.notSorted = function(obj) {
    if (!obj) {
      return [];
    }
    return Object.keys(obj);
  }
});

index.html

<table border=1 style="margin-top: 0px !important;">
  <thead>
    <tr>
      <th ng-repeat="(k,v) in data[0]">{{k}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in data">
      <td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)">
        <table ng-if="isArr" border=1>
          <thead>
            <tr>
              <td>
                <button ng-click="expanded = !expanded" expand>
                  <span ng-bind="expanded ? '-' : '+'"></span>
                </button>
              </td>
            </tr>
            <tr>
              <th ng-repeat="(sh, sv) in value[0]">{{sh}}</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="sub in value" ng-show="expanded">
              <td ng-repeat="(sk, sv) in sub">{{sv}}</td>
            </tr>
          </tbody>
        </table>
        <span ng-if="!isArr">{{value}}</span>
      </td>
    </tr>
  </tbody>
</table>

• javascript
• jquery
• css
• json
• angularjs

• 1 this is a plete duplicate of the question you asked earlier and doesn't even attempt to incorporate solution provided already stackoverflow./questions/31499247/… – charlietfl Commented Jul 19, 2015 at 15:47
• nope that was a column adjustment issue which is a dynamically generated column this question has exact same code which is used in previous question but a static code to know how to hide a column using simple angularjs ng-if – Neo Commented Jul 19, 2015 at 15:50
• and the solution provided did just what you are asking in this question – charlietfl Commented Jul 19, 2015 at 15:51
• yes solution is using directive which is related to adjusted column but here I expect a simple solution using angularjs ng-if condition which is used in most of the cases and useful to others by the way thanks for your previous solution that works perfectly fine – Neo Commented Jul 19, 2015 at 15:54

3 Answers 3

You can filter out columns that have only null values with:

JavaScript

$scope.cols = Object.keys($scope.data[0]).filter(function(col) {
    return $scope.data.some(function(item) {
      return item[col] !== null;
    });
});

and check in template if this column should be rendered:

HTML

<table border=1 style="margin-top: 0px !important;">
    <thead>
        <tr>
            <!-- Iterate over non-null columns -->
            <th ng-repeat="col in cols">{{col}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in data">
            <!-- Use ngIf to hide redundant column -->
            <td ng-if="cols.indexOf(prop)>=0" ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)" >
...

Plunker

http://plnkr.co/edit/PIbfvX6xvX5eUhYtRBWS?p=preview

So the id is null for every element in the array, then do

<th ng-repeat="(k,v) in data[0]" ng-show="v">{{k}}</th>

and

<td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)" ng-show="value">

plnkr: http://plnkr.co/edit/rra778?p=preview

You need to make use of the cols property you defined in your $scope, but you also need to make sure its correct and responsive. You do that like this:

var colsFromData = function(data) {
  var activeCols = {};
  data.forEach(function(o) {
    Object.keys(o).forEach(function(k) {
      if(null == o[k])
        return;
      activeCols[k] = 1; 
    })
  });
  return Object.keys(activeCols);
}

$scope.cols = colsFromData($scope.data);

$scope.$watchCollection('data', colsFromData);

Then in your template, to use the now correct cols array:

...
    <thead>
      <tr>
        <th ng-repeat="k in cols">{{k}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in data">
        <td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)" ng-if="cols.indexOf(prop) >= 0">
...

And the updated plunker