[Fixed]-Angular js infinite scrolling with django rest framework

by

1đź‘Ť

âś…

Your first error was the missing sanitize module as I referenced in my comment. Adding the missing include:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>

Will fix that.

Your current error is really a new question but has to do with this code in your index page (line 498 of the rendered index page).

$http.get(this.url).success(function(data) {
    var items = data.results;
    for (var i = 0; i < items.length; i++) {
        this.items.push(items[i]);
}
...

The data object that your code is being returned looks like this:

    [ {  
      "url":"http://192.241.153.25:8000/api/posts/test-2/",
      "id":3,
      "title":"test",
      "content":"test",
      "publish":"2016-01-01",
      "delete_url":"http://192.241.153.25:8000/api/posts/test-2/delete/"
    },
    ...
    ]

It doesn’t have a results property. I didn’t really look into what you were doing with it but you probably want this (notice the lack of the “results”):

$http.get(this.url).success(function(data) {
    var items = data;
    for (var i = 0; i < items.length; i++) {
        this.items.push(items[i]);
}
...

Or you want to change up what you’re returning so that it has a results property.

👤clockwatcher

0đź‘Ť

 <div ng-app="myApp" class="app">
    <div ng-controller="appCtrl as vm" class="main-container">
        <h1>Post List</h1>
        {% verbatim %}
        <div ng-repeat="post in vm.posts | limitTo: 10" class="post">
        <a href="{{ post.url}}">
            <h2>{{ post.title }}</h2> <!-- this is django template language and expects a django context variable named post that has an attribute of title -->
            <p>{{ post.content }}</p>
      </a>
            <p ng-if="vm.loadingPosts">Loading...</p>
        </div>
        {% endverbatim %}
    </div>
  </div>

instead you must escape your {{ and }} for angular to see them

 {% templatetag openvariable %} angular_variable {% templatetag closevariable %}

or use something like https://github.com/jrief/django-angular

👤Joran Beasley

Leave a comment