Create a new array containing the keys from an array of objects

Question

Create a new array containing the keys from an array of objects

My task involves extracting the key puppies from an array of objects and returning it in a new array: The input is an array of dogs structured like this:

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

The goal is to create an array containing all the puppies from all the dogs:

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

This is the code I have written so far:

function collectPuppies (dogs) {

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

Although it adds the names to the solution, they are returned within double brackets [[ ]]:

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

I came across a similar solution in this thread, indicating that I may be on the right track but struggling to pinpoint my mistake. Any assistance would be greatly appreciated. Thank you.

javascript arrays javascript-objects

Answer 1

Answer №1

Learn how to use the spread syntax to add items to an array:

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

console.log(gatherAllPuppies(dogs));

Alternatively, you can retrieve the puppies using Array.map() and flatten the output by spreading it into Array.concat():

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

console.log(gatherAllPuppies(dogs));

Answer 2

Learn how to use the spread syntax to add items to an array:

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

console.log(gatherAllPuppies(dogs));

Alternatively, you can retrieve the puppies using Array.map() and flatten the output by spreading it into Array.concat():

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

console.log(gatherAllPuppies(dogs));

Answer 3

Answer №2

Within the array of objects, there is a sub-array called puppies which needs to be handled differently. Rather than simply adding this sub-array to the main solution array, each individual puppy within the puppies array should be added separately. This can be achieved by looping through the puppies array using forEach() method. Here's an example:

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

The revised function:

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

Answer 4

Within the array of objects, there is a sub-array called puppies which needs to be handled differently. Rather than simply adding this sub-array to the main solution array, each individual puppy within the puppies array should be added separately. This can be achieved by looping through the puppies array using forEach() method. Here's an example:

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

The revised function:

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

Answer 5

Answer №3

You could combine.

const cats = [ {breed: 'Siamese', kittens: ['Whiskers', 'Fluffy', 'Stripey'] }, {breed: 'Persian', kittens: ['Mittens', 'Tabby'] } ]

const gatherKittens = cats =>
    cats.map(c => c.kittens).reduce((a,b) => a.concat(b), []);
  
console.log(gatherKittens(cats));

Answer 6

You could combine.

const cats = [ {breed: 'Siamese', kittens: ['Whiskers', 'Fluffy', 'Stripey'] }, {breed: 'Persian', kittens: ['Mittens', 'Tabby'] } ]

const gatherKittens = cats =>
    cats.map(c => c.kittens).reduce((a,b) => a.concat(b), []);
  
console.log(gatherKittens(cats));

Answer 7

Answer №4

To achieve this, all you need is the reduce method of Array.prototype.

x=[ {breed: 'Husky', puppies: ['Bear', 'Snowball', 'Ghost'] }, {breed: 'Golden Retriever', puppies: ['Max', 'Buddy'] } ] ;

var result=x.reduce((y,e)=>y.concat(e.puppies),[]);

console.log(result);

Answer 8

To achieve this, all you need is the reduce method of Array.prototype.

x=[ {breed: 'Husky', puppies: ['Bear', 'Snowball', 'Ghost'] }, {breed: 'Golden Retriever', puppies: ['Max', 'Buddy'] } ] ;

var result=x.reduce((y,e)=>y.concat(e.puppies),[]);

console.log(result);

Answer 9

Answer №5

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

An easy fix for your code is to swap out push with concat:

The concat() function combines two or more arrays together.

function gatherKittens(cats) {
   let result = [];
   for (let j=0; j < cats.length; j++){
       result = result.concat(cats[j].kittens);
   }
   return result;
}

Answer 10

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

An easy fix for your code is to swap out push with concat:

The concat() function combines two or more arrays together.

function gatherKittens(cats) {
   let result = [];
   for (let j=0; j < cats.length; j++){
       result = result.concat(cats[j].kittens);
   }
   return result;
}

Create a new array containing the keys from an array of objects

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Angular's change detection mechanism triggers too frequently

How to Retrieve an Image from a Server Using Node.js and Express

"Error TS2339: The property specified does not exist within type definition", located on the input field

Utilizing Next.js to conditionally display data

What is the best way to link a newly created contact to the current user in Mongoose?

What is the best method for passing a JavaScript object to PHP using Ajax?

Retrieve the Axios response without interruption, even in the event of an exception, when making API calls with multiple files

Set the array back to its initial value of 1 using jQuery and

Access another page by clicking on a link within an HTML document

What is the reason for handlers not being able to work without passing parameters in React?

Development and staging setups tailored specifically for a JavaScript SDK

Transform the Material UI grid orientation to horizontal row for content display

Node-express can seamlessly switch between multiple databases dynamically

What do you prefer: defining properties with the JSON object or with objectName.property in JavaScript

What is the reason that when we assign `'initial'` as the value for `display` property, it does not function as intended for list elements?

Concealing and revealing template URLs with AngularJS

Is it possible to automatically close navigation dropdowns when the screen size changes?

The function `Object.entries().map()` in TypeScript does not retain the original data types. What changes can I make to my interface to ensure it works correctly, or is there a workaround

Experiencing issues with the functionality of jQuery AJAX?

The combination of Heroku (Cedar) with Node, Express, and Jade is causing issues with the client-side javascript files in a subdirectory. While they work fine locally with foreman and