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
– Tirthraj Barot

2016-06-13 17:31:10 +00:00
Commented Jun 13, 2016 at 17:31 — Tirthraj Barot
– Tirthraj Barot, Commented Jun 13, 2016 at 17:31
yes i got it...thank you

Akshaya
– Akshaya

2016-06-14 04:11:28 +00:00
Commented Jun 14, 2016 at 4:11 — Akshaya
– Akshaya, Commented Jun 14, 2016 at 4:11

Community · Accepted Answer · 2017-05-23 12:16:00Z

1

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

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Jun 9, 2016 at 8:45

Babu Swami

7883 silver badges10 bronze badges

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

Comments

Surabhi K · Accepted Answer · 2016-06-10 11:33:36Z

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 · Accepted Answer · 2016-06-09 08:56:06Z

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 9, 2016 at 8:56

answered Jun 9, 2016 at 8:45

Chtioui Malek

11.5k1 gold badge76 silver badges70 bronze badges

Comments

Tirthraj Barot · Accepted Answer · 2016-06-09 09:11:15Z

0

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>

answered Jun 9, 2016 at 9:11

Tirthraj Barot

2,6792 gold badges19 silver badges33 bronze badges

Comments

Adam Nierzad · Accepted Answer · 2016-06-09 09:19:19Z

0

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/

answered Jun 9, 2016 at 9:19

Adam Nierzad

9326 silver badges19 bronze badges

Collectives™ on Stack Overflow

AngularJS table using data from REST API

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related