ng-repeat fails to execute correctly angularjs

Question

So i'm fairly new to angular and what i'm trying to do is take a json collection that is obtained from a RESTful call and loop through each one to display their value while associating its designated id in a href.

below you will find what I have tried:

<div class="span2">
        <!--Sidebar content-->

        Search: <input ng-model="query">
        Sort by:
        <select ng-model="orderProp">
            <option value="name">Alphabetical</option>
            <!--option value="age">Newest</option>
            <option value="-age">Oldest</option-->
        </select>

    </div>
    <div class="span10">
        <!--Body content-->
        <ul class="documents">
            <li ng-repeat="document in documents | orderBy:orderProp" class="thumbnail">
                <a href="#/rest/{{document.document_id}}">{{document.title}}</a>
            </li>
        </ul>
        <pre>{{ documents | json }}</pre>
    </div>

the Shttp call:

    function DocListCtrl($scope, $http)
{
    console.log('getting documents data');
    $http.get('/*RESTful call here*/').success(function(data)
    {
        $scope.documents = data;
    });
    $scope.orderProp = 'name';
}

when I run the page i get my list no problem using the

<pre>{{ documents | json }}</pre>

but the ng-repeat fails to implement.

EDIT

here is an example of the Json I am working with.

{
  "next": {},
  "items": [
    {
      "document_id": 3177554002,
      "title": "title of some item"
    }
]
}

What exactly am I doing incorrectly with the ng-repeat call that fails to list my data the way i wish?

Thanks for the help

@sza No specific error is thrown in the js console. It just fails to loop through the dataset. — James213, Aug 29 '13 at 12:16

score 1 · Accepted Answer · answered Aug 29 '13 at 14:00

Based on your JSON, I see your ng-repeat isn't quite correct. You need to reference the items array inside the documents object when iterating, like so:

<ul class="documents">
    <li ng-repeat="document in documents.items | orderBy:orderProp" class="thumbnail">
        <a href="#/rest/{{document.document_id}}">{{document.title}}</a>
    </li>
</ul>

Or if you want to make it simpler, bind data.items to documents instead of just data and then keep your existing template. This will also ensure that your orderBy keeps working.

I just realized the problem not 5 minutes ago and was in the process of looking for the answer. Thanks! — James213, Aug 29 '13 at 14:09

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

See here: https://stackoverflow.com/a/11972028/1449799 you want to consider using the reolve property of the routeprovider. notice the small gotcha (the solution there is slightly outdated, $defer has been renamed to $timeout) Delaying AngularJS route change until model loaded to prevent flicker

edited May 23 '17 at 10:32

Community

1
1

answered Aug 28 '13 at 21:14

Michael

2,973
1
27
67

ng-repeat fails to execute correctly angularjs

2 Answers2