从服务器端nodejs到angularjs的有限json响应

Posted 2023-03-08

【中文标题】从服务器端nodejs到angularjs的有限json响应

【英文标题】：Getting limited json response from server side nodejs to angularjs

【发布时间】：2018-06-20 15:24:41

【问题描述】：

我从 node.js 服务器得到这个 json 响应。

我使用 angularjs ng-repeat 函数在我的前端显示这个。 当响应包含数组中超过 100000 个对象时，浏览器会挂起

所以我想获得前数组中的三个对象响应，

但我再次将此响应发送回服务器端，

所以我想发送所有数据。

我来自服务器端的 json 响应：

[  
  field5: 'Chennai',
  field6: 'Asia',
  field7: '600091',
  field8: '10-10-1996',
 
  field5: 'Tamilnadu',
  field6: 'Asia',
  field7: '600091',
  field8: '10-10-1996' ,
 
  field5: 'Tuticorin',
  field6: 'Asia',
  field7: '600091',
  field8: '10-10-1996' ,
 
  field5: 'Japan',
  field6: 'Asia',
  field7: '600091',
  field8: '10-10-1996',
 
  field5: 'China',
  field6: 'Asia',
  field7: '600091',
  field8: '10-10-1996' ,
 
  field5: 'Canada',
  field6: 'Asia',
  field7: '600091',
  field8: '10-10-1996' ,
 
  field5: 'Canada',
  field6: 'Asia',
  field7: '600091',
  field8: '10-10-1996' ]

我的控制器.js：

获取服务器端数据到 angularjs：

$http(
   method: 'GET',
   url: '/api/getnewgroup'
).then(function (response) 
   $scope.excels = response.data;
, function (response) 
   window.location.href = '/';
);

我最后一个从客户端向服务器发送数据的 api：

$scope.uploadLast = function () 
   var data = 
      excels: $scope.excels,
   ;
   $http.post('/api/uploadlast', data).then(function (response) 
   ).catch(function (response) 
      alert(response.data);
      console.log(response);
   );

【问题讨论】：

您的服务器已经有数据（它正在发送到前端）。为什么需要从前端发回？您可以在后端本身访问相同的数据。

我在我的项目中改变了某种形式的东西，我正在发回某种形式的编辑对象

好的。在这种情况下，您需要使用分页。用户将只能编辑您显示的数据。因此，如果您显示 3 行，请将更新的 3 行发回并在后端更新完整的数据。

这可以使用拼接方法吗？我正在更改某种形式的东西意味着我只是从客户端在我的 json 中添加一个对象，然后我正在发送它。

【参考方案1】：

在您的 ng-repeat 中，您可以使用“limitTo”过滤器，如下所示：

ng-repeat="excel in excels | limitTo:3"

这只会显示数组的前 3 个条目。

如果您想为显示的项目设置另一个数组，您可以尝试：

$http(
    method: 'GET',
    url: '/api/getnewgroup'
).then(function (response) 
    $scope.excels = response.data.slice(0, 3);
    $scope.remainingExcels = response.data.slice(3);
, function (response) 
    window.location.href = '/';
);

和

$scope.uploadLast = function () 
    var data = 
        excels: $scope.excels.concat($scope.remainingExcels),
    ;
    $http.post('/api/uploadlast', data).then(function (response) 
    ).catch(function (response) 
        alert(response.data);
        console.log(response);
    );

但这是一件非常“丑陋”的事情。

【讨论】：

Limit 只会在 UI 中隐藏 json 对象，但他们从服务器端获取几乎所有数据。

@MohamedSameer 所以要更清楚你想做什么，不需要对我的回答投反对票。您如何期望在前端拥有 所有 数据而不从后端获取数据？那么，您的问题不是 javascript 或 Angular 相关问题，而是后端问题。

@MohamedSameer 编辑了另一个建议。

@MohamedSameer 如果我的建议有效，请不要忘记将其标记为已接受的答案，以帮助将来遇到相同问题的用户:)