Merge an array of arrays in AngularJS

Question

I have the following controller which was a result of another OP on Stack Overflow.

var getData = function() {
        var swindon = $http.get('(url)/swi/10?expand=true'),
            paddington = $http.get('(url)/pad/10?expand=true'),
            reading = $http.get('(url)/rdg/10?expand=true');
        $q.all([swindon,paddington,reading]).then(function(arrayOfResults) {
            $scope.listOfServices = arrayOfResults;
            console.log($scope.listOfServices);
        });
    };

  getData();

Which results in something like this

What I would like to do NOW is CONCAT these three arrays into ONE array. The arrays are absolutly identical in structure with the records being stored in the trainServices array

I have tried something along the lines of

$scope.listOfServices = $scope.listOfServices.data.concat(data);

which comes back as undefined

I can use the arrays in a nested NG-REPEAT, but I need to filter out duplicates from the three arrays, so I need them as one. The data is from a live feed so I cannot do the query before the data gets to the app.

This is how I call the arrays at the moment

<tbody ng-repeat="item in listOfServices">
      <tr ng-repeat="service in item.data.trainServices | customDelayFilter">

I have also included an ONLINE JSON representation of JSON.stringify($scope.listOfServices)

Not sure why the top level says JSON.. thats not actually a string in the output

Andriy · Accepted Answer · 2017-01-16 13:05:58Z

2

you can try:

$scope.listOfServices = [].concat(...arrayOfResults.map(item => item.data.trainServices));

it should give you concated array of trainServices' objects

arrayOfResults.map(item => item.data.trainServices)

this code in our case returns an array of three trainServices arrays, using Array.prototype.map function

...arrayOfResults.map(item => item.data.trainServices)

this code uses spread operator, which enables us to pass our array of arrays to Array.prototype.concat function, which merges those arrays of objects

edited Jan 16, 2017 at 13:05

answered Jan 16, 2017 at 12:00

Andriy

15.5k4 gold badges49 silver badges53 bronze badges

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

12 Comments

MOLEDesign Over a year ago

'Array.concat is not a function'.. and what is the ...arrayOfResults? why three dots?

Andriy Over a year ago

I updated my answer, and replaced Array.concat (native Array object's method, which is equal to Array.prototype.concat(), [].concat()), ([]).concat()) with [].array. If it still does not work for you, I will try to create a plunker for you

MOLEDesign Over a year ago

I just want to say that you are like, my most favourite person this year. Works PERFECTLY and is actually a vast improvement on what I had. I now have a beautiful list of all merged services. Fantastic!

MOLEDesign Over a year ago

There is only ONE issue (which is breaking one of my custom filters) the first object in the new array is ALWAYS empty. Is this due to the [] at the beginning which we are adding to? should I put some blank data in here maybe.. hmm..

MOLEDesign Over a year ago

No tried that.. then I get an object with my dummy array, NULL, the rest of the objects. Maybe one of the feeds is dead

|

Collectives™ on Stack Overflow

Merge an array of arrays in AngularJS

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related