AngularJS ng-repeat not displaying any values

Question

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.

Mistalis · Accepted Answer · 2017-07-12 14:50:22Z

4

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.

answered Jul 12, 2017 at 14:50

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

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

Comments

Abraham Gnanasingh · Accepted Answer · 2017-07-12 14:52:09Z

0

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

answered Jul 12, 2017 at 14:52

Abraham Gnanasingh

9072 gold badges14 silver badges33 bronze badges

Comments

alfishan aqeel · Accepted Answer · 2017-07-12 15:24:43Z



    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>

Please avoid code-only answers. Instead, explain what your code does and how/why it may solve the question.

Collectives™ on Stack Overflow

AngularJS ng-repeat not displaying any values

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related