Return JSONP from NodeJS server with AngularJS

Question

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 );
  });

});

items must be undefined don't see a `.length` anywhere else? Try dropping a `debugger` line in where you have the console.log then you can inspect the value of the variables while it's running. Ah I think I see it... will post an answer....nope take it back about the answer but the items is definitely undefined when you do .length on it otherwise wouldn't have that error. — shaunhusain, Aug 04 '16 at 00:38
@shaunhusain, So my data is coming back as `data = [Object, Object]` with all my returned vals from the server — Mark, Aug 04 '16 at 00:46
Try the interactive debugger (F12 -> Sources Panel, or just have F12 open and add a `debugger;` statement in the code) you should be able to add watchers or check out the local variables in there to see what data is and what data.children had and verify items is an array, just step through the code with F10 or the little arrow going over a circle in the debug tools. — shaunhusain, Aug 04 '16 at 00:55

Matthew Warneke · Accepted Answer · 2016-08-04T01:19:00.770

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!

Return JSONP from NodeJS server with AngularJS

1 Answers1