From an array of objects, return key in new array

Question

I've got an array of objects, and have to return the key puppies in a new array: This function takes an array of dogs in the format:

[
 {breed: 'Labrador', puppies: ['Fluffy', 'Doggo', 'Floof'] },
 {breed: 'Rottweiler', puppies: ['Biscuits', 'Mary'] }
]

It should return an array of all the puppies from all the dogs:

['Fluffy', 'Doggo', 'Floof', 'Biscuits', 'Mary']

This is my code so far:

function collectPuppies (dogs) {
 let solution=[];
 for(let i=0; i<dogs.length; i++){
 solution.push(dogs[i].puppies);
 }
 return solution;
 }

It adds the names to solution, but returning them in between [[ ]]:

Expected [ [ 'Spot', 'Spotless' ] ] to deeply equal [ 'Spot', 'Spotless' ]

I've seen my solution in this thread, so I believe I'm not too far but can't figure out what I'm doing wrong. Can anyone help me out? Thanks in advance.

Answer 1

Use the spread syntax to push the items into the array:

const dogs = [{"breed":"Labrador","puppies":["Fluffy","Doggo","Floof"]},{"breed":"Rottweiler","puppies":["Biscuits","Mary"]}];
function collectPuppies(dogs) {
 const solution = [];
 
 for (let i = 0; i < dogs.length; i++) {
 solution.push(...dogs[i].puppies);
 }
 
 return solution;
}
console.log(collectPuppies(dogs));

Another option is to get the puppies with Array.map(), and flatten the result by spreading into Array.concat():

const dogs = [{"breed":"Labrador","puppies":["Fluffy","Doggo","Floof"]},{"breed":"Rottweiler","puppies":["Biscuits","Mary"]}];
const collectPuppies = (dogs) => [].concat(...dogs.map(({ puppies }) => puppies));
console.log(collectPuppies(dogs));

• brunnerh: ({ puppies }) => puppies vs. d => d.puppies :thinking:
• Ori Drori: Although d. is shorter, I like destructuring because it give a focus to what is important in the method.
• brunnerh: Even if i'm generous and use dog => dog.puppies i would still prefer that to that mess of parens/braces. It's so unnecessary to destructure in this case.
• brunnerh: That would explain it, because i surely don't :)

Answer 2

In the array of objects, puppies is also an array. So you're adding an array to an array. Instead of:

solution.push(dogs[i].puppies);

You need to loop through the puppies array and add each puppy to the solution array individually. Rather than adding the 'puppies' field to the solution array, a second inner loop loops through the puppies array for each object and adds it to the solution array. The second inner loop can easily be done by calling forEach() on the puppies array. For example:

dogs[i].puppies.forEach((puppy) => {solution.push(puppy)});

Then the final function is:

function collectPuppies (dogs) {
 let solution=[];
 for(let i=0; i<dogs.length; i++){
 dogs[i].puppies.forEach((puppy) => {solution.push(puppy)});
 }
 return solution;
}

Answer 3

You could concat.

const dogs = [ {breed: 'Labrador', puppies: ['Fluffy', 'Doggo', 'Floof'] }, {breed: 'Rottweiler', puppies: ['Biscuits', 'Mary'] } ]
const collectPuppies = dogs =>
 dogs.map(d => d.puppies).reduce((a,b) => a.concat(b), []);
 
console.log(collectPuppies(dogs));

Answer 4

You simply need reduce of Array.prototype.

x=[ {breed: 'Labrador', puppies: ['Fluffy', 'Doggo', 'Floof'] }, {breed: 'Rottweiler', puppies: ['Biscuits', 'Mary'] } ] ;
var result=x.reduce((y,e)=>y.concat(e.puppies),[]);
console.log(result);

Answer 5

Array.prototype.push will push every argument to the array, but not the individual array elements of each argument.

The easiest way to correct your code is to replace push with concat:

The concat() method is used to merge two or more arrays.

function collectPuppies(dogs) {
 let solution = [];
 for (let i=0; i < dogs.length; i++){
 solution = solution.concat(dogs[i].puppies);
 }
 return solution;
}