imsi imsi imsi imsi - 1 month ago 5
AngularJS Question

Cannot read all JSON object

I'm trying to loop a JSON object returned from the back-end:

[{"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}
]


Here's the function which does that:

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

};


Here's the views:



<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>




The problem is that just the last line in the JSON object appears in the line charte which is:

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


But not the others.

Answer

This:

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

You are over-writing $scope.labels, $scope.sereies, and $scope.data for each iteration of the for loop. This is coding 101. Which makes me wonder if you should really be trying to write an Ionic application. Anyway, a much better solution is to use a forEach function:

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