How to get data into the table from API using Angular services?

Question

I have updated the code and the output I am getting like this:

So in the output table, endTime, period and monday are headers. For EndTime I want to display only endtime of the monday array but it is displaying an entire array. How do I specifically display only endTime data. Same goes for period.

Here is the plunker Timetable

Where am I going wrong?

Index.view.html

  <table class="table table-bordered">
    <tr>
      <th class="endTime" ng-model="monday.endTime">End Time</th>
      <td ng-repeat="d in data track by $index">{{d}}</td>
    </tr>
    <tr>
      <th class="period" ng-model="monday.period">Peroid</th>
      <td ng-repeat="d in data track by $index">{{d}}</td>
    </tr>

    <tr><th class="days">Monday</th></tr>
  </table>

Index.controller.js

        .controller('Admin.IndexController',function($scope,$http,$location,$rootScope,fileUpload)
    {                         
       $scope.college_id='583b01ce6864990011c12ec6';
        var i =0;       
        $http.get('https://student.herokuapp.com/college/'+$scope.college_id)
        .success(function(response){
             // for(var i=0;i<tableLen;i++){
                console.log(response.college);
            $scope.data = response.college.timeTableTemplate;
            console.log($scope.data);
         });           

        })

JSON Array

    "monday": [
    {
      "endTime": "08:50 AM",
      "startTime": "08:00 AM",
      "duration": "50",
      "period": "A"
    },
    {
      "endTime": "08:50 AM",
      "startTime": "08:00 AM",
      "duration": "50",
      "period": "A"
    }

If you can add plunkr or jsfiddle, it will be faster for you to get this answered. — Anurag Sinha
– Anurag Sinha, Commented Dec 27, 2016 at 11:46

Durgpal Singh · Accepted Answer · 2016-12-27 13:22:12Z

1

First of all change your json structure to in this type

{  
  "endTime": ["08:50 AM", "08:50 AM", "08:50 AM"],
  "startTime": "[08:00 AM, 08:00 AM, 08:00 AM]",
  "duration": ["50", "50", "50"],
  "period": ["A", "A", "A"]
}

I create a plunker there you can see I got the data from json and display in table tag. Please read this and apply in your code.

 <table class="table table-bordered">
    <tr>
      <th>Id</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
    <tr ng-repeat="d in data">
      <td >{{ d.id }}</td>
      <td >{{ d.firstName }}</td>
      <td >{{ d.lastName }}</td>
    </tr>
  </table>

Plunker

edited Dec 27, 2016 at 13:22

answered Dec 27, 2016 at 12:24

Durgpal Singh

12k4 gold badges40 silver badges52 bronze badges

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

8 Comments

jackD Over a year ago

Hi Thank you for the efforts. I see that headers is in horizontal format. I made them in vertical format but unable to include the data with related headers. Check the plunk.

Durgpal Singh Over a year ago

I am updating my plunker. please check this.

jackD Over a year ago

Thank you. I checked it and when I used the code, I could see the value in response and but not in $scope.data during debug. Any reason?

Durgpal Singh Over a year ago

value also in $scope.data. You can console the value of $scope.data and if it is helpful and click right of this answer.

jackD Over a year ago

data.endTime and data.period works in plnkr but not working with my code and when i remove the endTime and period entire json data is printed.

|

Collectives™ on Stack Overflow

How to get data into the table from API using Angular services?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related