How to display objects into table using angularjs

Question

I have the data of objects like this:

 var details = {  
            3:{
               2015-3-17 : 1,
               2015-3-18 : 0,
               routelines: "PASAY - CAGAYAN",
               tripcode: 3
              },
            4:{ 
               2015-3-17 : 0
               2015-3-18 : 4
               routelines: "PASAY - CAVITE",
               tripcode:4        
              },
 }

Now I am planning to display them in table but I am not sure how to start since they are all objects. I want to achieve the output which looks like this:

tripcode | routlines | 2015-3-17 | 2015-3-18| 3 |PASAY - CAGAYAN | 1 | 0 | 4 |PASAY - CAVITE | 0 | 4 |

Is there someone know how to do it? I tried this but unfortunately it's not work.

<div ng-repeat="detail in details">
  <div ng-repeat="(key, value) in detail">
      {{key}} : {{value}}
  </div>
</div>

Do you want to say that the structure of your objects is dynamic? And number and names of fields may differ? — Kirill Slatin
– Kirill Slatin, Commented Mar 17, 2015 at 3:53
Yes they are dynamic. .I declared it here as static as a summary because the entire data is get from database. — QWERTY
– QWERTY, Commented Mar 17, 2015 at 3:57
Duplicate of modelling data from rows to columns in Angular dynamically — Kirill Slatin
– Kirill Slatin, Commented Mar 17, 2015 at 3:59
I think this is a nice question +1 . i am waiting for some other answer :) .. I think your array structure is bad. — Ramesh Rajendran
– Ramesh Rajendran, Commented Mar 17, 2015 at 5:00
@RameshRajendran Hi, what do you mean by bad? it is mean I should change it? — QWERTY
– QWERTY, Commented Mar 17, 2015 at 5:09

Miguel · Accepted Answer · 2015-03-17 05:59:56Z

Make sure to format your data object correctly, some keys were missing quotes. Also details should be bound to $scope.

Try this:

function MyCtrl($scope) {
    
    $scope.details = {
        '3': {
            tripcode: 3,
            routelines: "PASAY - CAGAYAN",
            '2015 - 3 - 17': 1,
            '2015 - 3 - 18': 0
        },
        '4': {
           tripcode: 4,
           routelines: "PASAY - CAVITE",
           '2015 - 3 - 17': 0,
           '2015 - 3 - 18': 4
        },
    };
    
}

.header,
.items {
 border-bottom: 1px solid #000;
 width: 600px;
}

.header span,
.items span {
    display: inline-block;
    width: 120px;
    border-right: 1px solid #000;
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <div ng-controller="MyCtrl">
        <div ng-repeat="detail in details">
            <div class="header" ng-show="$index == 0">
                <span ng-repeat="(key, value) in detail">{{key}}</span>
            </div>
            <div class="items">
                <span ng-repeat="(key, value) in detail">{{value}}</span>
            </div>
        </div>
    </div>
</div>

Ramesh Rajendran · Accepted Answer · 2015-03-17 05:46:19Z

1

You have missed $scope

please change var details to $scope.details

answered Mar 17, 2015 at 5:46

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Collectives™ on Stack Overflow

How to display objects into table using angularjs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related