Angular.js ng-repeat no data using json

Question

I have a project I am working on where I have a json array (that will later come from a web service)

and I am trying to use ng-repeat to load that data into a table. (I have done this before, this time it's just slipping paste me what I am missing)

I posted the code to github here: https://github.com/sheets/Sch

I'd love any help I am posting the code here as well:

<body ng-app="MyApp">
<div ng-controller="SchCtrl">

    <table class="table table-striped table-bordered">
        <thead>
        <th width="15%">Date and Time</th>
        <th width="50%">Provider</th>
        <th width="15%">Location</th>
        <th width="10%">Map</th>
        </thead>
        <tbody>
        <tr ng-repeat="appointment in appointments | orderBy:'startDatetime':true">
            {{appointments.startDatetime | date:'MM/dd/yyyy HH:mm'}}
            {{appointments.providerName}}
{{appointments.apptLocation}}</tr></tbody></table>


</div>
</body>

and app.js:

var app = angular.module("MyApp", []);

app.controller("SchCtrl", function($scope, $http) {
    $http.get('/appointments.json').
        success(function(data, status, headers, config) {
            $scope.appointments = data;
        }).
        error(function(data, status, headers, config) {
            // log error
        });
});

For one thing... you have no <td>.

MikeSmithDev
– MikeSmithDev

2014-09-03 16:41:06 +00:00
Commented Sep 3, 2014 at 16:41 — MikeSmithDev
– MikeSmithDev, Commented Sep 3, 2014 at 16:41
Removed for debugging.

Matthew Sheets
– Matthew Sheets

2014-09-03 16:43:50 +00:00
Commented Sep 3, 2014 at 16:43 — Matthew Sheets
– Matthew Sheets, Commented Sep 3, 2014 at 16:43

S1r-Lanzelot · Accepted Answer · 2014-09-03 16:36:49Z

3

Try accessing appointment.startDatetime instead of appointments.startDatetime. Same for providerName and apptLocation. Basically remove the s in appointments.

answered Sep 3, 2014 at 16:36

S1r-Lanzelot

2,2663 gold badges32 silver badges50 bronze badges

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

Comments

ababashka · Accepted Answer · 2014-09-03 16:46:53Z

2

You can take a look at this simple exaple
1. You need to wrap all your data in TD tags
2. To access your data - you need to do that like data.appointments
3. In ng-repeat you need to access every item in your appointments array - so that is appointment

answered Sep 3, 2014 at 16:46

ababashka

2,1011 gold badge15 silver badges15 bronze badges

Comments

Idkt · Accepted Answer · 2014-09-03 16:37:20Z

2

Shouldn't it be

$scope.appointments = data.appointments

? And then you have to access

appointment.<field_name>

answered Sep 3, 2014 at 16:37

Idkt

3,0034 gold badges29 silver badges48 bronze badges

Collectives™ on Stack Overflow

Angular.js ng-repeat no data using json

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related