How can I join several http.get responses and update ng-repeat?

Question

How can I join several http.get responses and update ng-repeat?

Navigation

#1 by (2 votes)

0

I have a controller with several calls $http.get('/...') that get the data correctly.

$scope.results = [];
$http.get('/call1').then(function(response){
    proccess(response);
});
$http.get('/call2').then(function(response){
    proccess(response);
});
$http.get('/call2').then(function(response){
    proccess(response);
});

The data that returns are of the type:

// call 1
{items:{1:{id: 1, title: "Título",…}, 2:{id: 2, title: "Título",…},…}}
// call 2
{items:{1:{id: 10, title: "Título",…}, 2:{id: 20, title: "Título",…},…}}
// call 3
{items:{1:{id: 100, title: "Título",…}, 2:{id: 200, title: "Título",…},…}}

In the function that it processes, being all the same structures is simple:

function proccess(response){
    $scope.results = response.items;
}

ng-repeat

<div data-ng-repeat="item in results">
    {{item.id}}
</div>

And this part is where I find the problem.

In theory I am trying to make the ng-repeat update with the new data as you get it.

I've tried with extend , concat , merge , push ... and I always replace them or I throw errors by console and I'm a bit stuck with this issue.

How should the answers be joined so that you update the ng-repeat as you receive the data?

PD: Any questions comment and update

javascript angularjs

asked by OscarR 25.05.2017 в 21:26

source

1 answer

move form form to json Center a div with bootstrap

score 2 · Accepted Answer

The most important problem is that in ng-repeat you use items as a data source and not results (what you set in $scope.results ). Just like this, it's going to do the loop for $scope.items (which is not seen where you define it).

<!-- aqui abajo, cambia items x results -->
<div data-ng-repeat="item in results">
    {{item.id}}
</div>

I've tried extens, concat, merge, push ... and it always replaces them or throws me errors by console and I'm a bit stuck with this theme.

Maybe you did not use concat correctly. Remember that it does not modify the current array but returns one that has the sum of both arrays so you need to reassign it.

The correct way for it to work is like this:

function proccess(response){
  $scope.results = $scope.results.concat(response.items);
}