Display Object in HTML table ng-repeat - Angular

Question

My Object looks like this

Object
    207T : Object
        metal : 1
        steel : 2
    205T : Object
        metal : 1
        steel : 3
    208T : Object
        metal : 1
        steel : 3
    209T : Object
        metal : 0
        steel : 9

Now this object i need to display in below format

207T, 205T, 208T, 209T  should be in table heading which is fine

<tr>
    <th></th>
    <th></th>
    <th ng-repeat="(key, value) in mainObj">{{key}}</th>
</tr>

And then the format should be

How to acheive this

Abdullah Al Noman · Accepted Answer · 2017-03-23 06:01:47Z

2

We can not create table column wise so in this case best and cleanest way would be to filter out the row values and using them inside view. So In controller

app.controller(['$scope', function($scope){
  $scope.object= values;

  $scope.valuesMetal= [];
  $scope.valuessteel = [];
  // initializing row values for use in the using in view

  angular.forEach(values, function(value, key) {
     $scope.valuesMetal.push(value.metal );
     $scope.valuessteel.push(value.metal );
  }); 
}]);

In the view we just display our values

<tr>
    <th ng-repeat="(key, value) in mainObj">{{key}}</th>
</tr>

<tr>
    <td >Metal</td>
    <td  ng-repeat="(key, value) in valuesMetal" >{{value}}</td>

</tr>

<tr>
    <td >steel</td>
    <td  ng-repeat="(key, value) in valuessteel" >{{value}}</td>

</tr>

<div>

answered Mar 23, 2017 at 6:01

Abdullah Al Noman

2,8884 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Giancarlos · Accepted Answer · 2017-03-23 05:56:56Z

1

For the header you need to convert the object to array:

// inside controller
mainObjArray = Object.keys(mainObj); // ['207T', '205T', '208T', '209T']

// header html

<tr>
     <th ng-repeat="key in mainObjArray">{{key}}</th>
</tr>

And for the rest of values you can do some like:

// inside controller
mainObjValues = mainObjArray.map(function(item){
  return mainObj[item];
}); // output: [{metal: 1, steel: 2}, {...}]

Then the body-table:

<tbody>
  <tr ng-repeat="item in mainObjValues">
   <td>{{item.metal}}</td>
   <td>{{item.steel}}</td>
   ....
  </tr>
</tbody>

answered Mar 23, 2017 at 5:56

Giancarlos

15110 bronze badges

Comments

Sachila Ranawaka · Accepted Answer · 2017-03-23 06:08:54Z

angular.module("app",[])
.controller("ctrl",function($scope){
var sampleObj = {  
   "207T":{  
      "metal":1,
      "steel":2
   },
   "205T":{  
      "metal":1,
      "steel":3
   },
   "208T":{  
      "metal":1,
      "steel":3
   },
   "209T":{  
      "metal":0,
      "steel":9
   }
}
 $scope.metal = [];
 $scope.steel= []
$scope.keys = Object.keys(sampleObj);

angular.forEach(sampleObj, function(obj) {
     $scope.metal.push(obj.metal );
     $scope.steel.push(obj.steel );
  }); 

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
<table>
 
 <tr>
    <th ng-repeat="item in keys">{{item}}</th> 
</tr> 
<tr>
    <td >Metal</td>
    <td  ng-repeat="item in metal track by $index" >{{item}}</td>

</tr>

<tr>
    <td >Steel</td>
    <td  ng-repeat="item in steel track by $index" >{{item}}</td>

</tr>
</table>
</div>

Arun · Accepted Answer · 2017-04-08 18:13:13Z

0

This is actually simple.

    <table>
    <tr>    
        <th></th>
        <th ng-repeat="(key, value) in mainObj">{{key}}</th>
    </tr>

Here you are ng repeating in th, will display 207t, 205T etc

    <tr ng-repeat="item in items track by $index">    
        <td ng-repeat="item1 in item track by $index">{{item[$index]}}</td>            
    </tr>

Here you have to ng repeat tr, so that it will display metal and steel. and then each td u have to ng repeat and should display with index item[$index]

answered Apr 8, 2017 at 18:13

Arun

6841 gold badge14 silver badges26 bronze badges

Collectives™ on Stack Overflow

Display Object in HTML table ng-repeat - Angular

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related