使用 AngularJS 从 NodeJS 服务器返回 JSONP

Posted 2023-03-03

【中文标题】使用 AngularJS 从 NodeJS 服务器返回 JSONP

【英文标题】：Return JSONP from NodeJS server with AngularJS

【发布时间】：2016-12-08 23:47:15

【问题描述】：

我正在尝试在我的应用上实现ngInfiniteScroll - Loading Remote Data。

演示运行良好，我已成功获取 Reddit API，但无法让我的列表正常工作。

我成功地点击了200 服务器响应并且可以在开发工具中看到我的数据。这些答案对1 和2 有一些帮助，但我仍然不完全确定该怎么做。

---

编辑（见角度工厂编辑）：

这个回调现在正在工作，$http 会成功，但是我现在得到了Cannot read property 'length' of undefined

---

Angular 工厂：

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 路由：

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

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

);

【问题讨论】：

项目必须未定义在其他任何地方都看不到.length？尝试在您拥有 console.log 的位置删除 debugger 行，然后您可以在它运行时检查变量的值。啊，我想我明白了...会发布一个答案....不要收回答案，但是当您在其上执行 .length 时，这些项目肯定是未定义的，否则不会出现该错误。

@shaunhusain，所以我的数据以data = [Object, Object] 的形式返回，并带有我从服务器返回的所有值

尝试交互式调试器（F12 -> 源面板，或者只是打开 F12 并在代码中添加 debugger; 语句）您应该能够添加观察者或检查其中的局部变量要查看 data 是什么以及 data.children 有什么并验证 items 是一个数组，只需使用 F10 或调试工具中的小箭头越过一个圆圈来单步执行代码。

【参考方案1】：

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

应该修复它！