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
– shaunhusain, Commented Aug 4, 2016 at 0:38
@shaunhusain, So my data is coming back as data = [Object, Object] with all my returned vals from the server — Mark
– Mark, Commented Aug 4, 2016 at 0: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
– shaunhusain, Commented Aug 4, 2016 at 0:55

Matthew Warneke · Accepted Answer · 2016-08-04 01:19:00Z

2

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!

edited Aug 4, 2016 at 1:19

answered Aug 4, 2016 at 1:08

Matthew Warneke

364 bronze badges

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

Collectives™ on Stack Overflow

Return JSONP from NodeJS server with AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related