Convert array of array objects into array of objects

Question

I've spent the last couple hours going through some very similar answers to the above question but after a few implementations of loops and reduce I still have not gotten the solution I need.

I am getting an array of objects via service calls. I am pushing those controller array objects to another array because I need a single array to load data into a multi select. I.E.

StatesService.getAreaCities().then(function(response) {
   controller.cities = response.data.rows;

   controller.areaOptions.push(controller.cities);
});

StatesService.getAreaStates().then(function(response) {
   controller.states = response.data.rows;

   controller.areaOptions.push(controller.states);
});

controller.areaOptions = [];

This is an example of how I expect and need my array object to look.

With no modification this is how my array looks with those array objects pushed in.

How do I get the above data structure like the 1st image, an array of objects? I tried a solution with reduce()

var newCities = controller.cities.reduce(function(city){
    return controller.city;
}, {});

controller.areaOptions.push(newCities);

but it wasnt what I was looking for because it returned a single object with all city property and all its values. I need each object to contain city and its value.

EDIT

I figured out the solution! Thanks to Lex.

I looped over each object in the array in each service and pushed the property. Thanks to all for steering me in the right direction to figure this out, even the person that downvoted me :)

StatesService.getAreaCities().then(function(response) {
    controller.cities = response.data.rows;

    controller.cities.forEach(function(city){
       controller.areaOptions.push(city);
    });

});

You're pushing the entire array in, but you'll have to loop and push each array element individually. — Lex, May 11 '17 at 19:26
Are there multiple arrays or just one array where the only element is another array? Can you not just iterate over each element in each array and push the objects in them to another array? [the `$$hashKey` is something added by angular](http://stackoverflow.com/questions/18826320/what-is-the-hashkey-added-to-my-json-stringify-result) — Patrick Barr, May 11 '17 at 19:27
@PatrickBarr there are multiple arrays(controller.foo) in my new array object(areaOptions) — gwar9, May 11 '17 at 19:31
@Lex I have the objects returning in the console! Object {city: "All Cities"} Object {city: "Boston"} I'm just not sure how to push this into the new array? — gwar9, May 11 '17 at 19:51

score 2 · Answer 1 · answered May 11 '17 at 19:29

2

Looks like response.data.rows is an array. So when you push response.data.rows into controller.areaOptions you are adding the rows array as an array element. (Basically making it a 2-dimensional array)

You should use Array.prototype.concat

answered May 11 '17 at 19:29

Alexey

642
1
7
21

Thanks, do you mean use concat instead of push or in addition to? something like controller.areaOptions.concat(controller.cities); ? – gwar9 May 11 '17 at 20:11
Also that give me separate arrays not all the objects in a single array – gwar9 May 11 '17 at 20:30
you should use `concat` istead of `push`. Also keep in mind, that `concat` returns a new array, so you will have to do something like this `controller.areaOptions = controller.areaOptions.concat(response.data.rows)` – Alexey May 12 '17 at 04:52

Convert array of array objects into array of objects

1 Answers1