AngularJS table using data from REST API

Question

I want to display a table using AngularJS. The data source for the table will be a REST API. Here is an example response:

{
  "value": 43,
  "C_class": [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10,
    11,
    12,
    13
  ],
  "C_name": [
    "C_1",
    "C_2",
    "C_3",
    "C_4",
    "C_5",
    "C_6",
    "C_7",
    "C_8",
    "C_9",
    "C_10",
    "C_11",
    "C_12",
    "C_13"
  ]
}

I want to display the data in the format below:

<tr><td> 1</td><td>C_1<td>
<td>2<td><td>C_2<td>
<td>3<td><td>C_3<td>
<td>4<td><td>C_4<td>
<td>5<td><td>C_5<td>.....

I have tried using ng-repeat, but unable to fetch. Thank you

<table class="table" border="1" style="width: 100%;" id="detail_table">
<tbody><tr ng-repeat="value in tests">
<td>{{value.C_name}}</td>
<td>{{value.C_class}}</td>
</tr></tbody></table>

found your solution @Akshaya ? – Tirthraj Barot Jun 13 '16 at 17:31 — Tirthraj Barot, Jun 13 '16 at 17:31

score 1 · Accepted Answer · edited May 23 '17 at 12:16

You are not using ng-repeat in correct way. You can take help from the below code to display your table:

<table class="table" border="1" style="width: 100%;" id="detail_table">
    <tbody>
        <tr ng-repeat="value in tests.C_class">
            <td ng-bind="tests.C_class[$index]"></td>
            <td ng-bind="tests.C_name[$index]"></td>
        </tr>
    </tbody>
</table>

I'll suggest you study a little bit about using ng-repeat.

Try using ng-bind instead of {{}}. see here

Surabhi K · Answer 2 · 2016-06-10T11:33:36.737

This worked for me. http://plnkr.co/edit/7gLpeyrtyMgnqtdXDxAu?p=preview

<body ng-controller="myCtrl">
<div class="container">
  <table class="table table-striped" style="height: 100px; width: 100px;">
      <tr ng-repeat="(key,value) in new_c_obj">
        <td>{{key}}</td>
        <td>{{value}}</td>
      </tr>
  </table>
</div>

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.response = {
  "value": 43,
  "C_class": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
  "C_name": [ "C_1", "C_2", "C_3", "C_4", "C_5", "C_6", "C_7",  "C_8", "C_9", "C_10", "C_11", "C_12", "C_13"]
};
$scope.c_obj = {};
$scope.new_c_obj = {};
$scope.c_obj.c_class = $scope.response["C_class"];
$scope.c_obj.c_name = $scope.response["C_name"];
for($scope.i = 0; $scope.i <= $scope.c_obj.c_class.length-1; $scope.i++){
  $scope.new_c_obj[$scope.c_obj.c_class[$scope.i]] = $scope.c_obj.c_name[$scope.i];
}

});

Chtioui Malek · Answer 3 · 2016-06-09T08:56:06.383

0

You can use the $index in your ng-repeat (as suggested by B.A.B.U) or properly reformat your data into a new array :

var orgArray = your_data;

var newArray = [];
orgArray.C_class.forEach(function (p, i) {
    newArray.push({ C_class: p, C_name: orgArray.C_name[i] });
});

and from there you can apply ng-repeat on the new array to display the fields.

edited Jun 09 '16 at 08:56

answered Jun 09 '16 at 08:45

Chtioui Malek

11,197
1
72
69

score 0 · Answer 4 · answered Jun 09 '16 at 09:11

You can simply add those two into another object array..

var mainObjC = array();

C_class.forEach(myFunction);

var x = 0;
function myFunction(){
   var obj = {
       C_name : C_name[x],
       C_class : C_class[x]
   }
   x++;
   mainObjC.push(obj);
}

And your html would be

<table class="table" border="1" style="width: 100%;" id="detail_table">
<tbody>
<tr ng-repeat="value in mainObjC">
<td>{{value.C_name}}</td>
<td>{{value.C_class}}</td>
</tr>
</tbody>
</table>

score 0 · Answer 5 · answered Jun 09 '16 at 09:19

The format of the data being returned from your API doesn't lend itself well to what you're trying to achieve. You'd have to make assumptions about the the relationship of data between the two arrays. A better structure would be like this:

[
  {
    "class": 1,
    "name": "C_1"
  },
  {
    "class": 2,
    "name": "C_2"
  },
  {
    "class": 3,
    "name": "C_3"
  },
  {
    "class": 4,
    "name": "C_4"
  },
  {
    "class": 5,
    "name": "C_5"
  }
]

I've created a fiddle which might help, it uses the above data and displays a table with the data: https://jsfiddle.net/9ypkv77x/

AngularJS table using data from REST API

5 Answers5