【问题标题】:Cannot read all JSON object无法读取所有 JSON 对象
【发布时间】:2026-02-12 01:30:01
【问题描述】:

我正在尝试循环从后端返回的 JSON 对象:

[{"number":1,"des":"Tetières","la_date":1477919985000},
 {"number":1,"des":"Vérification Cable B+","la_date":1477436400000},
 {"number":1,"des":"Vérification Cable B+","la_date":1477919985000},
 {"number":1,"des":"Vidéo","la_date":1477436400000},
 {"number":1,"des":"Vidéo","la_date":1477919985000}
]

这是执行此操作的函数:

charCtrl.getAllData = function () {
var url = servername+'admin/dashboard/getIncidentDepart';
// var url = 'http://localhost:8080/getFournisseurs';
//$scope.startSpin('spinner-3');
$ionicLoading.show({       template: 'Dashboard...'     });;
console.log("Inside getIncidentDepart " + url);

function onSuccess(response) {
  console.log("+++++getIncidentDepart SUCCESS++++++");
  if (response.data.success != false) {
    console.log("Inside getIncidentDepart response..." + JSON.stringify(response.data));
    $scope.checkload = response.data.data;
    alert(JSON.stringify($scope.checkload));
    //check.getAllFicheMission();
    var loadedData= $scope.checkload;
    for(var i=0;i<loadedData.length;i++){
      $scope.labels = [$filter('date')(loadedData[i].la_date, "dd-MM-yyyy")];
      $scope.series = [loadedData[i].des];
      $scope.data   = [loadedData[i].number];

    }
    $ionicLoading.hide();
  } else {
    alert("failure");
  }
  //$scope.stopSpin('spinner-3');
};

function onError(response) {
  console.log("-------getIncidentDepart FAILED-------");
  //$scope.stopSpin('spinner-3');
  $ionicLoading.hide();
  console.log(response.data);
  console.log("Inside getIncidentDepart error condition...");
};

//----MAKE AJAX REQUEST CALL to GET DATA----
ajaxServicess.getData(url,username,password, 'GET', '').then(onSuccess, onError);

};

以下是观点:

<ion-content >
  <div class="card" ng-init="charCtrl.getAllData()">
<div class="item item-divider">
  A line chart {{totom}}
</div>
<div class="item item-text-wrap">
  <canvas id="linde" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series" chart-options="{showTooltips: true}"></canvas>
</div>
</div>

问题在于 JSON 对象中的最后一行出现在折线图中,即:

{"number":1,"des":"Vidéo","la_date":1477919985000}

但不是其他人。

【问题讨论】:

  • 在您的 for 循环中,您将覆盖(而不是附加)每次迭代的范围属性 $scope.labels $scope.series $scope.data,因此您最终会得到列表中最后一个项目。
  • 感谢您的帮助....但是解决方案是什么??
  • @JoelCDoyle 打败了我,他的回答应该能做到。

标签: javascript angularjs json ionic-framework


【解决方案1】:

这个:

for(var i=0;i<loadedData.length;i++){
  $scope.labels = [$filter('date')(loadedData[i].la_date, "dd-MM-yyyy")];
  $scope.series = [loadedData[i].des];
  $scope.data   = [loadedData[i].number];
}

对于 for 循环的每次迭代,您都在重写 $scope.labels$scope.sereies$scope.data。这是编码 101。这让我想知道您是否真的应该尝试编写 Ionic 应用程序。无论如何,更好的解决方案是使用forEach 函数:

$scope.labels = [];
$scope.series = [];
$scope.data = [];
loadedData.forEach(function(data) {
  $scope.labels.push($filter('date')(data.la_date, "dd-MM-yyyy"));
  $scope.series.push(data.des);
  $scope.data.push(data.number);
});

【讨论】: