角度foreach Json并重复答案

【问题标题】：angular foreach Json and repeat角度foreach Json并重复
【发布时间】：2023-03-13 18:35:01
【问题描述】：

我对 Angular 很陌生，但我遇到了一些问题。我正在使用我命名为 RateInfoService 的服务从 API 中提取数据。 JSON 看起来像这样

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

并检查数组长度只是因为我将另一个 URL 作为 API。我尝试在视图中显示它但它失败了，因为用户可以填写筹码..但之后也是可乐。该视图仅显示可乐，因为它会因为循环而覆盖芯片。我尝试了两种不同的方式

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

和

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

两者都只显示可乐。这可能是因为 scope.rate = [] 但我对我的代码以及如何修复它感到困惑。对于 PHP，我经常使用 foreach($prices as $index=>pricing){code}

但是我怎么能用角度来做呢，或者有没有人有修复或示例代码。

【问题讨论】：

标签： json angularjs angularjs-directive foreach

【解决方案1】：

在您的循环中，您只是将先前的值替换为最新的值，因此您最终只会得到最后一个值，即 COLA。

您需要将所有数组添加到数组中。你可以简单地这样做

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

现在您有了一个与 API 响应相同的数组。遍历这个

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

【讨论】：

angular.forEach($scope.rate = data.query.results.rate, function (value, key) ... 有点像我试图在视图中做同样的事情
我不太明白你的评论。有问题吗？
别担心，已经解决了。我稍后会发布解决方案！

【解决方案2】：

我认为您正在多次初始化数组。因此，只需将该数组声明从 for 循环拉到外部。所以它应该可以正常工作..

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

【讨论】：

我以前试过这个。遗憾的是我没有解决问题。同样的结果发生

【解决方案3】：

答案很简单你犯了一个错误我的朋友

你在 for 循环中创建 $scope.rate = [] 所以每次它进入循环时都会清空你的数组，所以在 for 循环中 last value 会被插入你的数组并且你的循环停止，所以你只有 cola

更新：

看这个例子：http://jsfiddle.net/kevalbhatt18/bcfzrfn9/1/

如果您将表用于 ng-repate，那么只有 tr 不工作，您必须在其中使用 td，在我的示例中，我首先创建了两个表，但第二个表正在工作。

注意：不要再次创建对象在范围内传递数据并使用直接在 ng-repate 示例中：$scope.dataObject = your object

参见示例。

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

【讨论】：

我确实理解这句话。我就是不知道怎么解决。
@Romano 看到我更新的答案让我知道如果你想要任何东西，你可以根据需要编辑 ng-repate