CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
greentech
greentech

Reputation: 111

AngularJS ng-repeat not displaying any values

I would like to to ng-repeat on this json (entries):

[{
  "Entry": {
    "id": "1",
    "title": "Test",
    "person": "Test",
    "description": "Test",
    "created": "2017-07-11 20:19:55",
    "modified": "2017-07-11 20:19:55",
    "date_finished": "2017-07-11 20:19:00",
    "finished": false
  }
}, {
  "Entry": {
    "id": "2",
    "title": "Test 1",
    "person": "Test 1",
    "description": "Test 1",
    "created": "2017-07-11 20:23:02",
    "modified": "2017-07-11 20:23:02",
    "date_finished": "2017-07-11 20:22:00",
    "finished": false
  }
}, {
  "Entry": {
    "id": "3",
    "title": "Test 2",
    "person": "Test 2",
    "description": "Test 2",
    "created": "2017-07-11 20:23:13",
    "modified": "2017-07-11 20:23:13",
    "date_finished": "2017-07-11 20:23:00",
    "finished": false
  }
}]

This is how I get the data:

public function index() {
    $this->Entry->recursive = 0;
    $this->set('entries', $this->Paginator->paginate());
    $this->set('_serialize', 'entries');
}

This is my display code:

<table class="table">
    <thead>
    <tr>
        <th>Title</th>
        <th>Person</th>
        <th>Description</th>
        <th>Finished Date</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="entry in entries">
        <td>{{ entry.title }}</td>
        <td>{{ entry.person }}</td>
        <td>{{ entry.description }}</td>
        <td>{{ entry.date_finished }}</td>
    </tr>
    </tbody>
</table>

But there is no output, all the values are empty.

Is the json format ok? Any suggestion would be very helpful.

Upvotes: 1

Views: 214

Answers (3)

alfishan aqeel
alfishan aqeel

Reputation: 220





    angular.module("myApp",[])
    .controller("myController", ['$scope', function($scope){
          $scope.entries = JSON.parse(JSON.stringify({
      "Entry": [{"Entry": {
        "id": "1",
        "title": "Test",
        "person": "Test",
        "description": "Test",
        "created": "2017-07-11 20:19:55",
        "modified": "2017-07-11 20:19:55",
        "date_finished": "2017-07-11 20:19:00",
        "finished": false
      }},{ "Entry":  {
        "id": "2",
        "title": "Test 1",
        "person": "Test 1",
        "description": "Test 1",
        "created": "2017-07-11 20:23:02",
        "modified": "2017-07-11 20:23:02",
        "date_finished": "2017-07-11 20:22:00",
        "finished": false
      }},{"Entry":   {
        "id": "3",
        "title": "Test 2",
        "person": "Test 2",
        "description": "Test 2",
        "created": "2017-07-11 20:23:13",
        "modified": "2017-07-11 20:23:13",
        "date_finished": "2017-07-11 20:23:00",
        "finished": false
      }}]
    }));
    }])


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <html>

        <body ng-app="myApp">
            <div ng-controller="myController">
                <table class="table">
        <thead>
        <tr>
            <th>Title</th>
            <th>Person</th>
            <th>Description</th>
            <th>Finished Date</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="entry in entries.Entry">
            <td>{{entry.Entry.title}}</td>
            <td>{{entry.Entry.person}}</td>
            <td>{{entry.Entry.description}}</td>
            <td>{{entry.Entry.date_finished}}</td>
        </tr>
        </tbody>
    </table>
            </div>
        </body>
    </html>

Upvotes: -1

Abraham Gnanasingh
Abraham Gnanasingh

Reputation: 897

It should be entry.Entry.title not entry.title. You can remove the Entry key if you are not returning any other keys.

Upvotes: 0

Mistalis
Mistalis

Reputation: 18279

Each object of your array contains an Entry object that contains your data.

So you may want to change your code the following:

<tr ng-repeat="entry in entries">
    <td>{{ entry.Entry.title }}</td>
    <td>{{ entry.Entry.person }}</td>
    <td>{{ entry.Entry.description }}</td>
    <td>{{ entry.Entry.date_finished }}</td>
</tr>

As a side note, refactoring your JSON object would probably be a cleaner way, it will avoid having to copy .Entry every time.

Upvotes: 4

Related Questions