I am trying to iterate through data from a web Service in my angularjs project. The issue I am having is:
In my console log it shows each item with their info but as soon as I try to show it on my html it only shows the last item of al the data?
HTML
<ion-item ng-repeat="item in documents">{{item}}</ion-item>
if I add id to item like this:
<ion-item ng-repeat="item in documents">{{item.id}}</ion-item>
it only shows blank spaces in the same amount as the data. Which I think says the data is there, but there is just not any string value showing.
JS
.controller('DashCtrl', function($scope, $http) {
$http.get("http://localhost:15021/Service1.svc/getAllTrucks")
.success(function(data) {
var obj = data;
var ar = [];
angular.forEach(obj, function(index, element) {
angular.forEach(index, function(indexN, elementN) {
ar = {id: indexN.QuoteID, quotenum: indexN.QuoteNumber};
console.log(ar);
});
$scope.documents = ar;
});
console.log(data);
})
.error(function(data) {
console.log("failure");
});
What I am trying to accomplish is to populate the app with a list of data. Thank You. (if something doesn't make any sense please ask)
You are not actually adding each record to the array, you are only assigning the iterated item to the array. As a result, the only thing you see is the last record. You can add .push() to add each iterated record to the end of your array.
var ar = [];
angular.forEach(obj, function(index, element) {
angular.forEach(index, function(indexN, elementN) {
ar.push({id: indexN.QuoteID, quotenum: indexN.QuoteNumber});
});
});
$scope.documents = ar;
In addition, you should assign ar at the end of your nested iterations.
you can try it : ` .success(function(data) {
var obj = data;
$scope.documents = [];
angular.forEach(obj, function(index, element) {
angular.forEach(index, function(indexN, elementN) {
$scope.documents.push( {id: indexN.QuoteID, quotenum: indexN.QuoteNumber});
console.log($scope.documents);
});
});
console.log(data);
})`