Create a new array of objects by extracting specific properties from an existing array of objects

Question

Create a new array of objects by extracting specific properties from an existing array of objects

Consider the input array below:

const initialArray = [{name: 'john', age: 12, height: 178, likes: 'music'},
                      {name: 'mike', age: 22, height: 181, likes: 'sport'},
                      {name: 'anna', age: 18, height: 175, likes: 'sleep'},
                      {name: 'paul', age: 24, height: 170, likes: 'drink'}
                     ];

To create a new array of objects with specific properties such as name and height, you can achieve the following result:

result = [{name: 'john', height: 178},
          {name: 'mike', height: 181},
          {name: 'anna', height: 175},
          {name: 'paul', height: 170}
         ];

An attempt using map was made but it seems to have an issue:

  const result = initialArray.map((a) => {
    a.name, a.height
  });

javascript arrays object ecmascript-6

Answer 1

Answer №1

To ensure proper functionality, remember to use the return keyword within curly braces or enclose the code in parentheses.

Consider exploring Destructuring assignment, a technique that allows you to specify the desired property names for resulting objects:

const myArray = [
  {name: 'alice', age: 30, height: 160, likes: 'reading'},
  {name: 'bob', age: 25, height: 175, likes: 'painting'},
  {name: 'charlie', age: 35, height: 180, likes: 'traveling'},
  {name: 'diane', age: 40, height: 165, likes: 'cooking'}
];
const updatedResult = myArray.map(({name, height}) => ({name,height}));
console.log(updatedResult);

Answer 2

To ensure proper functionality, remember to use the return keyword within curly braces or enclose the code in parentheses.

Consider exploring Destructuring assignment, a technique that allows you to specify the desired property names for resulting objects:

const myArray = [
  {name: 'alice', age: 30, height: 160, likes: 'reading'},
  {name: 'bob', age: 25, height: 175, likes: 'painting'},
  {name: 'charlie', age: 35, height: 180, likes: 'traveling'},
  {name: 'diane', age: 40, height: 165, likes: 'cooking'}
];
const updatedResult = myArray.map(({name, height}) => ({name,height}));
console.log(updatedResult);

Answer 3

Answer №2

It is recommended to output the object in this format:

const updatedData = originalData.map((item) => {
  return {title:item.title, price:item.price}
});

Answer 4

It is recommended to output the object in this format:

const updatedData = originalData.map((item) => {
  return {title:item.title, price:item.price}
});

Answer 5

Answer №3

One simple way to accomplish this task is by utilizing map, reduce, or a for..of loop.

1) Using map

const initialArray = [
  { name: "john", age: 12, height: 178, likes: "music" },
  { name: "mike", age: 22, height: 181, likes: "sport" },
  { name: "anna", age: 18, height: 175, likes: "sleep" },
  { name: "paul", age: 24, height: 170, likes: "drink" },
];

const result = initialArray.map(({ name, height }) => ({ name, height }));
console.log(result);

2) Using reduce

const initialArray = [
  { name: "john", age: 12, height: 178, likes: "music" },
  { name: "mike", age: 22, height: 181, likes: "sport" },
  { name: "anna", age: 18, height: 175, likes: "sleep" },
  { name: "paul", age: 24, height: 170, likes: "drink" },
];

const result = initialArray.reduce((acc, { name, height }) => {
  acc.push({ name, height });
  return acc;
}, []);
console.log(result);

3) Using for..of loop

const initialArray = [
  { name: "john", age: 12, height: 178, likes: "music" },
  { name: "mike", age: 22, height: 181, likes: "sport" },
  { name: "anna", age: 18, height: 175, likes: "sleep" },
  { name: "paul", age: 24, height: 170, likes: "drink" },
];

const result = [];
for (let { name, height } of initialArray) {
  result.push({ name, height });
}
console.log(result);

Answer 6

One simple way to accomplish this task is by utilizing map, reduce, or a for..of loop.

1) Using map

const initialArray = [
  { name: "john", age: 12, height: 178, likes: "music" },
  { name: "mike", age: 22, height: 181, likes: "sport" },
  { name: "anna", age: 18, height: 175, likes: "sleep" },
  { name: "paul", age: 24, height: 170, likes: "drink" },
];

const result = initialArray.map(({ name, height }) => ({ name, height }));
console.log(result);

2) Using reduce

const initialArray = [
  { name: "john", age: 12, height: 178, likes: "music" },
  { name: "mike", age: 22, height: 181, likes: "sport" },
  { name: "anna", age: 18, height: 175, likes: "sleep" },
  { name: "paul", age: 24, height: 170, likes: "drink" },
];

const result = initialArray.reduce((acc, { name, height }) => {
  acc.push({ name, height });
  return acc;
}, []);
console.log(result);

3) Using for..of loop

const initialArray = [
  { name: "john", age: 12, height: 178, likes: "music" },
  { name: "mike", age: 22, height: 181, likes: "sport" },
  { name: "anna", age: 18, height: 175, likes: "sleep" },
  { name: "paul", age: 24, height: 170, likes: "drink" },
];

const result = [];
for (let { name, height } of initialArray) {
  result.push({ name, height });
}
console.log(result);

Answer 7

Answer №4

One alternative approach is to use lodash's pick function (in case you require the ability to dynamically determine the property names) or you can also utilize ramda's pick methods which accomplish the same task.

const result = initialArray.map(R.pick(['name', 'height']));

Answer 8

One alternative approach is to use lodash's pick function (in case you require the ability to dynamically determine the property names) or you can also utilize ramda's pick methods which accomplish the same task.

const result = initialArray.map(R.pick(['name', 'height']));

Create a new array of objects by extracting specific properties from an existing array of objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I am having trouble grasping certain syntax in JavaScript when it comes to using `${method_name}`

Stretching the Mantine Accordion Section

Design a background image that is optimized for both high-resolution retina displays and standard non-ret

Ways to reset input fields following form submission

What is the best way to center my navigation bar without interfering with the mobile version's JavaScript functionality?

Is there a way to verify if all elements within an array are identical?

Updating values in an array if they exceed a certain threshold

Tips for calculating the distance from the cursor position to the visible area

Having trouble adding a div in React due to the error "Objects are not allowed as a React child"?

Tips on storing a blob (AJAX response) in a JSON file on your server, not on the user's computer

Why is my jQuery SlideReveal not displaying on page load?

Can you explain the significance of the declaration "char (* ( *f())[])();"?

Utilizing JSON Data with JQuery: A Beginner's Guide

Integrating VueJs into a pre-existing .net core 5 project

Strange Reselect selector actions

Incorporating Javascript jQuery functionalities from an external file

Detecting Changes in Angular2 Component Attributes via Observables

The issue I am facing is with the post_logout_redirect_uri not functioning properly when using localStorage in an OIDC Auth

I encountered an error stating "Module Not Found" while attempting to locate slick-carousel/slick/slick.css. This issue arose while implementing reacy-slick within my Next.js project

During the execution of a function, the React list remains empty which leads to the issue of having