CODEWITHSUNDEEP
jsonangularjsangularjs-directiveforeach
Romano
Romano

Reputation: 117

angular foreach Json and repeat

I'm pretty new to angular and I'm stuck with something. I'm pulling data from an API with a service I named RateInfoService. The JSON looks like this

enter image description here

  $scope.refreshData = function() { 
     RateInfoService.getMarket($scope.alarmingMarket).success(function(data) {
      if($scope.alarmingMarket.length <= 1){
         $scope.rate = [];
         $scope.rate.marketid = data.query.results.rate.id;
         $scope.rate.rate = data.query.results.rate.Rate;
         $scope.rate.updateTime = data.query.results.rate.Time;
         console.log($scope.rate);
  } else {
    angular.forEach(data.query.results.rate, function (value, key){
      $scope.rate = [];
      $scope.rate.marketid = data.query.results.rate[key].id;
      $scope.rate.rate = data.query.results.rate[key].Rate;
      $scope.rate.updateTime = data.query.results.rate[key].Time;
      console.log($scope.rate);
    });
   }
 })
}

and checking array length is only because I pull another URL as API. I try to show it in the view but it fails, because the user can fill in chips.. but after it also cola. The view only shows cola because it overwrites the chips because of the loop. I tried in both different ways

<tr ng-repeat="rate in rates track by $index">
   <p>{{rate.marketid}} {{rate.rate}}</p>
   <p>Last price update {{rate.updateTime}} </p>
</tr>

and 

<tr ng-repeat="data.query.results.rate.id track by $index">
   <p>{{$index + 1}}</p>
   <p>{{rate.marketid}} {{rate.rate}}</p>
   <p>Last price update {{rate.updateTime}} </p>
</tr>

Both only show cola. It is probably because of scope.rate = [] but I struggle with my code and how to fix it. with PHP I often used someting like foreach($prices as $index=>pricing){code}

But how can I do it with angular, or does anyone has a fix or example code.

Upvotes: 1

Views: 1077

Answers (3)

Keval Bhatt
Keval Bhatt

Reputation: 6322

The answer is very simple you done one mistack my friend

you are creating $scope.rate = [] in for loop so every time it will go in loop it will empty your array so in for loop last value will be inserted in your array and your loop stop so you got only cola

UPDATE:

see this example: http://jsfiddle.net/kevalbhatt18/bcfzrfn9/1/

And if you use table for ng-repate then only tr not working you have to use td inside it see in my example i created two table first on display nothing but second one is working.

NOTE: Dont create object again pass your data in scope and use directly in ng-repate example: $scope.dataObject = your object

see in example.

<table>
        <tr ng-repeat="dataObject in data.results.rate">
            <td>{{$index + 1}}</td>
            <td>ID : {{dataObject.id}} - RATE: {{dataObject.Rate}}</td>
            <td>Last price update {{dataObject.Time}}</td>
        </tr>
</table>

Upvotes: 1

Mahesh
Mahesh

Reputation: 107

I think you are initializing the array multiple times. So just pull that array declaration from for loop to the outside. So it should work Fine..

$scope.rate = []; // Pull this out of for Loop Like Below

$scope.refreshData = function() { 
    //Intialise Here
    $scope.rate = [];
     RateInfoService.getMarket($scope.alarmingMarket).success(function(data) {
      if($scope.alarmingMarket.length <= 1){
         $scope.rate = [];
         $scope.rate.marketid = data.query.results.rate.id;
         $scope.rate.rate = data.query.results.rate.Rate;
         $scope.rate.updateTime = data.query.results.rate.Time;
         console.log($scope.rate);
  } else {
    angular.forEach(data.query.results.rate, function (value, key){
      //Instead of Here
      $scope.rate.marketid = data.query.results.rate[key].id;
      $scope.rate.rate = data.query.results.rate[key].Rate;
      $scope.rate.updateTime = data.query.results.rate[key].Time;
      console.log($scope.rate);
    });
   }
 })
}

Upvotes: 1

Andreas Poulsen
Andreas Poulsen

Reputation: 101

In your loop you are just replacing the previous value with the latest one, so you end up with only the last value which is COLA.

You need to add all the array to an array. You could simply do it like so

$scope.rates = data.query.results.rate

Now you have an array identical to the response from the API. To loop through this

<tr ng-repeat="rate in rates">
    <td>{{rate.id}} - {{rate.rate}}</td>
    <td>Last price update {{rate.date}}</td>
</tr>

Upvotes: 1

Related Questions