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, May 30 '17 at 10:01
@Rajesh I have used ng-repeat and binded before for normal grids where column names are from data — jose, May 30 '17 at 10:03
So the real issue is how to loop over keys of object. Right? — Rajesh, May 30 '17 at 10:03
@Rajesh please dont close because i am not getting idea to do this type of integrated and If i achieve this i have complicated with array of arrays afterwards — jose, May 30 '17 at 10:04
@Rajesh yes and here the keys are should be in first column and remaining all columns are values based on that keys. — jose, May 30 '17 at 10:05
@jose you should start by referring [this](https://stackoverflow.com/questions/15127834/how-can-i-iterate-over-the-keys-value-in-ng-repeat-in-angular) — Rajesh, May 30 '17 at 10:06
Just a Hint: You should change the JSON callback in a correct format, means item by item. like `var jsonData = [{ "number": 3, "sum": 5, "ratio": 1.2}, { "number": 5, "sum": 10, "ratio": 1.3}]` — lin, May 30 '17 at 10:06
@Rajesh yes i have tried it but if i used same in td it is showing all values in one column and if i used in tr then empty grid is showing — jose, May 30 '17 at 10:07
@jose please create a plnkr or fiddle or add some code of what you have tried. If you will not do it, this question gonna be closed. — lin, May 30 '17 at 10:08
@lin thanks for suggestion I have given sample but actually i am getting an object as you mention from MongoDb and i have store it in jsonData — jose, May 30 '17 at 10:08

score 3 · Accepted Answer · edited May 30 '17 at 10:40

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 '17 at 10:40

Ramesh Rajendran

37,412
45
153
234

answered May 30 '17 at 10:13

Hadi J

16,989
4
36
62

Thanks for answer but first column is keys like name1,name2. how can here – jose May 30 '17 at 10:15
same name is coming and only three rows is coming but we sended 4 rows in data even $index+1 is placed – jose May 30 '17 at 10:17
2

Well tried. but I don't know why you hardcode `name` with index? – Ramesh Rajendran May 30 '17 at 10:26
@Hadi {{'name'+($index+1)}} here you are getting it by creating specific format like name + -- but my keys have different names in place of it – jose May 30 '17 at 10:26
1

`*1` for your effort :) – Ramesh Rajendran May 30 '17 at 10:36
1

@RameshRajendran +1 for your help and now we can remove this I think `$scope.arraySize = new Array(4);` – jose May 30 '17 at 10:39
1

@jose ! yup. not needed. but should be your every array having the same object length :) good luck ! – Ramesh Rajendran May 30 '17 at 10:41
1

@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 – jose May 30 '17 at 10:45
Normally i will show in {{ value || empty }} so it will show remaining columns as empty and only for sum column value it will show but here how to do the same – jose May 30 '17 at 10:46
1

It's may be threw `out of index bound` error. that's why I mentioned in my last comment. We need all array object length should be same :) . – Ramesh Rajendran May 30 '17 at 10:46

How to bind grid from json which has array

1 Answers1