angular foreach Json and repeat

Question

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.

Andreas Poulsen · Accepted Answer · 2015-11-09 01:11:03Z

1

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>

answered Nov 9, 2015 at 1:11

Andreas Poulsen

1013 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Romano Over a year ago

angular.forEach($scope.rate = data.query.results.rate, function (value, key) ... Is kinda same as <tr ng-repeat="data.query.results.rate track by $index"> Where I tried to do the same in the view

Andreas Poulsen Over a year ago

I don't quite understand your comment. Is there a problem?

Romano Over a year ago

Don't worry, it's solved. I will post the solution later on !

Mahesh · Accepted Answer · 2015-11-09 09:06:02Z

1

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

answered Nov 9, 2015 at 9:06

Mahesh

1076 bronze badges

1 Comment

Romano Over a year ago

I have tried this before. Sadly I didn't solve the problem. The same result happens

Keval Bhatt · Accepted Answer · 2015-11-12 05:23:53Z

1

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>

edited Nov 12, 2015 at 5:23

answered Nov 9, 2015 at 9:24

Keval Bhatt

6,3623 gold badges26 silver badges40 bronze badges

2 Comments

Romano Over a year ago

I do understand that offcourse. I just don't know how to solve it.

Keval Bhatt Over a year ago

@Romano see i updated answer let me know if you want any thing not you can edit ng-repate as you want

Collectives™ on Stack Overflow

angular foreach Json and repeat

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related