Kiran Kiran - 2 years ago 89
AngularJS Question

How to display json data in two columns in a table using angular

I have data in my json it will be dynamic and I want to display the data in a table with two columns. I am trying but only the first two records are repeating. I don't see all the records in the table.. Any help?

This is my json : var data = '{
"service-name":"Mongo DB"
"service-name":"Smart License"

my html code:

<table border="1px" width="100%" ng-repeat="data in serviceData" ng-if="$index % 2 == 0">

i want to display something like this

Mongo Db Smart License
Billing subscription

Answer Source

Transform your data in the controller:

var serviceDataView = function() {
    var res = [];
    for (var i = 0; i < $scope.serviceData.length; i+=2){
        col1: $scope.serviceData[i]['service-name'], 
        col2: $scope.serviceData[i+1] ? $scope.serviceData[i+1]['service-name'] : null
    return res;

$scope.structuredData = serviceDataView();

So that it can be easily used in the view:

<table border="1px" width="100%">
    <tr ng-repeat="data in structuredData">


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download