Preserve the returned values in a mapped object, whose property key is the role position in the array papeis. Next, only change the property value according to the API return. The following changes were made:$scope.mapa = {};
An object is created in the control scope to contain the returned results. Note that it is not a array, and that is not reset to each load cycle.angular.forEach(papeis, function(papel, index) {[...]
The method forEach() provides an extra property, passed as the second parameter of the call - the item index in the source collection.$scope.mapa[index] = resultado;
The return of the query to the API is stored on the map according to the index.And, view:<tr ng-repeat="(k, valor) in mapa">
The format (key, value) in one ngRepeat allows an object to be used as a source, the properties as value keys. The key (which is only the index of the paper in the original array) can be ignored, but the value is used for popular your view.(Additionally one other shoe object was created, $scope.prev, to help identify value differences between the current and previous request.)Functional example:angular.module("money", []);
angular.module("money")
.controller("moneyController", function($scope, $http, $interval) {
var papeis = ["ABEaV3.SA", "BBTG12.SA", "AGRO3.SA", "BPAN4.SA", "BPHA3.SA", "BRML3.SA", "BRSR6.SA", "BTOW3.SA", "CARD3.SA", "CIEL3.SA", "CMIG4.SA", "CTKA4.SA", "CTSA3.SA"];
$scope.mapa = {};
$scope.prev = {};
function consultarCotacao() {
angular.forEach(papeis, function(papel, index) {
var yql = 'select * from yahoo.finance.quotes where symbol in ("' + papel + '")';
var api = "https://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(yql);
var url = api + "&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=";
$http({
method: "GET",
url: url,
timeout: 3000,
headers: { 'Content-Type': "json" }
})
.then(function successCallback(response) {
resultado = response.data.query.results.quote;
if (resultado.Name !== null) {
if (angular.toJson($scope.mapa[index]) !== angular.toJson(resultado)) {
if ($scope.mapa[index]){
var clone =angular.fromJson(angular.toJson($scope.mapa[index]));
$scope.prev[resultado.Symbol] = clone;
}
$scope.mapa[index] = resultado;
}
} else {
console.log(resultado.Symbol + " não foi encontrado!");
}
}, function errorCallback(response) { console.log("Falha na chamada do recurso."); });
});
}
$scope.color = function(valor) {
if (valor.indexOf("+") !== -1) {
return "green";
}
return "red";
};
$scope.markDiff = function(a, b) {
if (a !== b) {
return "bold-text";
}
return "normal-text";
};
consultarCotacao();
$interval(consultarCotacao, 5000, 0);
});</code></pre><pre class="snippet-code-html lang-html prettyprint-override"><code><html lang="pt-br" ng-app="money">
<head>
<meta charset="UTF-8"/>
<title>BMF&Bovespa</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.green {
color: green;
}
.red {
color: red;
}
.bold-text {
font-weight:bold;
}
</style>
<script>
</script>
</head>
<body ng-controller="moneyController">
<table class="table table-striped">
<thead>
<tr>
<th>Código</th>
<th>Cotação</th>
<th>Variação (RS)</th>
<th>Variação (%)</th>
<th>Maior cotação</th>
<th>Menor cotação</th>
<th>Abertura</th>
<th>Fechamento</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(k, valor) in mapa">
<td>{{valor.Symbol}}</td>
<td ng-class='markDiff(valor.LastTradePriceOnly, prev[valor.Symbol].LastTradePriceOnly)'>
R$ {{valor.LastTradePriceOnly}}</td>
<td ng-class="color(valor.Change)">R$ {{valor.Change}}</td>
<td ng-class="color(valor.ChangeinPercent)">{{valor.ChangeinPercent}}</td>
<td>R$ {{valor.DaysHigh}}</td>
<td>R$ {{valor.DaysLow}}</td>
<td>R$ {{valor.Open}}</td>
<td>R$ {{valor.PreviousClose}}</td>
<td>{{valor.Volume}}</td>
</tr>
</tbody>
</table>
<pre>{{mapa | json}}<pre>
<pre>{{prev | json}}<pre>
</body>
</html>