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

Question

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>

Answer 1

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

Answer 2

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