How to bind grid from json which has array

Question

I got json object from mongoDb like below

JsonData = [
        Number: {
                 name1 : 4,
                 name2 : 5,
                 name3 : 8,
                 name4 : 5
                },
        Sum : {
                name1 : 52,
                name2 : 55,
                name3 : 82,
                name4 : 55
               },
        Ratio : {
                name1 : 1.5,
                name2 : 5.2,
                name3 : 0.5,
                name4 : 4.2
               }
            ]

In the above json data only the numbers will change and remaining all static and the array will not change except the numbers.

I am trying to bind this jsonData to grid as shown below

NameTypes Number  Sum  Ratio 
+--------+------+----+-----
  name1     4     52   1.5
  name2     5     55   5.2
  name3     8     82   0.5
  name4     5     55   4.2

How to bind this in angular.js

Thanks for Help

@DavidR I have tried with normal table not ng-grid using ng-repeat — jose
– jose, Commented May 30, 2017 at 10:01
@Rajesh I have used ng-repeat and binded before for normal grids where column names are from data — jose
– jose, Commented May 30, 2017 at 10:03
So the real issue is how to loop over keys of object. Right? — Rajesh Dixit
– Rajesh Dixit, Commented May 30, 2017 at 10:03

Ramesh Rajendran · Accepted Answer · 2017-05-30 10:40:13Z

3

It should be like this

var app = angular.module('anApp', []);
app.controller('ctrl', function($scope) {
  $scope.JsonData = {
    Number: {
      name1: 4,
      name2: 5,
      name3: 8,
      name4: 5
    },
    Sum: {
      name1: 52,
      name2: 55,
      name3: 82,
      name4: 55
    },
    Ratio: {
      name1: 1.5,
      name2: 5.2,
      name3: 0.5,
      name4: 4.2
    }
  };      
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<div ng-app="anApp" ng-controller="ctrl">

  <table>
    <thead>
      <tr>
        <th>Type</th>
        <th ng-repeat="(key,value) in JsonData">{{key}}</th>
      </tr>
    </thead>
    <tbody ng-repeat="(key,value) in JsonData.Number">
      <tr>
        <td>{{key}}</td>
        <td ng-repeat="(key,value) in JsonData">{{value[$parent.key]}}</td>
      </tr>
    </tbody>
  </table>

</div>

edited May 30, 2017 at 10:40

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

answered May 30, 2017 at 10:13

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

10 Comments

Ramesh Rajendran Over a year ago

Well tried. but I don't know why you hardcode name with index?

Ramesh Rajendran Over a year ago

*1 for your effort :)

jose Over a year ago

@RameshRajendran +1 for your help and now we can remove this I think $scope.arraySize = new Array(4);

Ramesh Rajendran Over a year ago

@jose ! yup. not needed. but should be your every array having the same object length :) good luck !

jose Over a year ago

@RameshRajendran Thanks! for this this is perfect. out of curiocity i am asking if Sum array has another name5 : 52 and remaing arrays dont have how it will be show

|

Collectives™ on Stack Overflow

How to bind grid from json which has array

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related