I have a json nested array as shown in this fiddle and i want to display the elements as rows and columns. Each row should have 3 columns. I got this fiddle where same is done but it has simple json array.Here ng-if condition is used to break the data into rows.

<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4">{{products[$index]}}</div>
    <div class="col-xs-4">{{products[$index + 1]}}</div>
    <div class="col-xs-4">{{products[$index + 2]}}</div>
</div>

But in my case i want to display the array as shown in table structure shown in the fiddle. Also if there is any null objects then it should be ignored. How it can be done? Any idea?

I have a json nested array as shown in this fiddle and i want to display the elements as rows and columns. Each row should have 3 columns. I got this fiddle where same is done but it has simple json array.Here ng-if condition is used to break the data into rows.

<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4">{{products[$index]}}</div>
    <div class="col-xs-4">{{products[$index + 1]}}</div>
    <div class="col-xs-4">{{products[$index + 2]}}</div>
</div>

But in my case i want to display the array as shown in table structure shown in the fiddle. Also if there is any null objects then it should be ignored. How it can be done? Any idea?

• javascript
• angularjs

• Shouldn't that be solved with CSS? – Deblaton Jean-Philippe Commented Oct 30, 2015 at 8:52
• @DeblatonJean-Philippe I tried using same logic as mentioned in that fiddle but how do i get the data to be displayed from the nested array? – Navaneet Commented Oct 30, 2015 at 8:54
• Nice Problem. Similar to this. But this problem should have better and easy solution. stackoverflow./questions/27037772/… – Partha Sarathi Ghosh Commented Oct 30, 2015 at 9:00

4 Answers 4

Just simple try like this

Working Demo

<div ng-controller="MyCtrl">
    <div ng-repeat="products in items"> 
       <div ng-repeat="product in products">
          <div class="col-xs-4" >{{product.IDTYPE}}</div>
      </div>
    </div>
</div>

I think you want something like this:

<div ng-controller="MyCtrl"> 
   <div> I want to display in below table structure</div><br/>
    <div ng-repeat="item in items">
        <div class="row" ng-if="{$index%3==0}">
            <div ng-repeat="x in item" class="col-xs-4">{{x.IDTYPE}}</div>
        </div>
    </div>
</div>

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.items = [{
    "b": {
        "PRIMKEY": 96598.0,
        "IDTYPE": "userlogin",
        "USERID": "yes"
    },
    "c": {
        "PRIMKEY": 106974.0,
        "IDTYPE": "user_access",
        "USERID": "no"
    },
    "d": {
        "PRIMKEY": 107009.0,
        "IDTYPE": "Tel_ty",
        "USERID": "no"
    },
    "e": {
        "PRIMKEY": 60130.0,
        "IDTYPE": "new_user",
        "USERID": "no"
    },
    "f": {
        "PRIMKEY": 90885.0,
        "IDTYPE": "gen_id",
        "USERID": "001_0_2361"
    },
    "g": null,
    "h": {
        "PRIMKEY": 106996.0,
        "IDTYPE": "uyy_id",
        "USERID": "753"
    },
    "i": {
        "PRIMKEY": 106993.0,
        "IDTYPE": "qwe_id",
        "USERID": "585"
    },
    "j": {
        "PRIMKEY": 104831.0,
        "IDTYPE": "phone_login",
        "USERID": "122324"
    },
    "k": {
        "PRIMKEY": 85476.0,
        "IDTYPE": "windows_id",
        "USERID": "qwertr"
    }
}];
}

You can check this fiddle.

Here is a very good solution if you use angular.filter https://github./a8m/angular-filter

Use chunkBy

Code will be look like

<div ng-repeat="productRow in products| chunkBy: 3">
   <div class="row" ng-repeat="product in productRow">
      <div class="col-xs-4">{{product}}</div>
   </div>
</div>

I think is will fit your needs, let me know if it doesn't.

var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {

    var items = [{
      "b": {
        "PRIMKEY": 96598.0,
        "IDTYPE": "userlogin",
        "USERID": "yes"
      },
      "c": {
        "PRIMKEY": 106974.0,
        "IDTYPE": "user_access",
        "USERID": "no"
      },
      "d": {
        "PRIMKEY": 107009.0,
        "IDTYPE": "Tel_ty",
        "USERID": "no"
      },
      "e": {
        "PRIMKEY": 60130.0,
        "IDTYPE": "new_user",
        "USERID": "no"
      },
      "f": {
        "PRIMKEY": 90885.0,
        "IDTYPE": "gen_id",
        "USERID": "001_0_2361"
      },
      "g": null,
      "h": {
        "PRIMKEY": 106996.0,
        "IDTYPE": "uyy_id",
        "USERID": "753"
      },
      "i": {
        "PRIMKEY": 106993.0,
        "IDTYPE": "qwe_id",
        "USERID": "585"
      },
      "j": {
        "PRIMKEY": 104831.0,
        "IDTYPE": "phone_login",
        "USERID": "122324"
      },
      "k": {
        "PRIMKEY": 85476.0,
        "IDTYPE": "windows_id",
        "USERID": "qwertr"
      }
    }];
    $scope.items = [];
    function format() {
      for (var item in items[0]) {
        var i = items[0][item]
        if (i) $scope.items.push(i.IDTYPE);
      }
    }
    format();
  });

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="App" ng-controller="Ctrl" class="container">
    <div ng-repeat="item in items" ng-if="$index % 3 == 0" class="row">
        <div class="col-xs-4">{{items[$index]}}</div>
        <div class="col-xs-4">{{items[$index + 1]}}</div>
        <div class="col-xs-4">{{items[$index + 2]}}</div>
    </div>
</div>