Search code examples
angularjsnode.jsexpressjsonpnginfinitescroll

Return JSONP from NodeJS server with AngularJS


Im trying to implement ngInfiniteScroll - Loading Remote Data on my app.

The Demo works fine & I was successfully getting the Reddit API, but cant get my list to work.

I am successfully hitting 200 server response & can see my data in the dev tool. These answers have been some help 1 & 2 but I'm still not fully sure on what to do.


EDIT (see angular factory edit):

This callback is now working and $http is going to success however I'm now getting Cannot read property 'length' of undefined


Angular Factory:

Reddit.prototype.nextPage = function() {
  if (this.busy) return;
  this.busy = true;

  // Edit - I changed this var from
  // var url = config_api.API_ENDPOINT_LOCAL + "list?after=" + this.after + "?alt=json-in-script&jsonp=JSON_CALLBACK";
  // to
  var url = config_api.API_ENDPOINT_LOCAL + "list?after=" + this.after + "?alt=json-in-script&callback=JSON_CALLBACK";

  $http.jsonp(url)
    .success(function(data) {
      console.log(data);
      var items = data.children;
      for (var i = 0; i < items.length; i++) {
        this.items.push(items[i].data);
      }
      this.after = "t3_" + this.items[this.items.length - 1].id;
      this.busy = false;
    }.bind(this));
  console.log('Reddit.prototype');
};

NodeJS Route:

app.get('/list', function (req, res) {

  Found.find(function (err, post) {
    if ( err ) {
      res.send( err );
    }
    res.jsonp( post );
  });

});

Solution

  • Reddit.prototype.nextPage = function() {
      if (this.busy) return;
      this.busy = true;
    
      // Edit - I changed this var from
      // var url = config_api.API_ENDPOINT_LOCAL + "list?after=" + this.after + "?alt=json-in-script&jsonp=JSON_CALLBACK";
      // to
      var url = config_api.API_ENDPOINT_LOCAL + "list?after=" + this.after + "?alt=json-in-script&callback=JSON_CALLBACK";
    
      $http.jsonp(url)
        .success(function(data) {
          console.log(data);
          var items = data;
          for (var i = 0; i < items.length; i++) {
            this.items.push(items[i]);
          }
          this.after = "t3_" + this.items[this.items.length - 1].id;
          this.busy = false;
        }.bind(this));
      console.log('Reddit.prototype');
    };
    

    Should fix it!