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

Learning Angular2: What is the mechanism behind the automatic incrementation of the ID variable in this particular section?

The $.post method is malfunctioning

I am a newcomer to Stack Overflow and I am facing difficulty in getting my form to submit successfully

Finding the location of a file within a published web component

Ensuring session data is updated when saving a mongoose model

Error in jQuery: Null property causing TypeError when reading 'text'

The Datatable feature is malfunctioning, unable to function properly with Javascript and JQuery

When $(.class) displays result, Javascript ceases execution

Leveraging AngularJS ngBind with a JavaScript object

Enhance your website's accessibility by using JavaScript to allow the down and up arrow keys to function

What is the best way to disregard all pathNames and display my index.php file directly from the root of my website?

Ways to showcase HTML table in a four-column layout/grid

Would you like to learn how to display the value of a different component in this specific Angular 2 code and beyond

The masonry reorganization is behaving strangely

Tips for resolving the error message: React is not able to identify the `currentSlide` and `slideCount` prop on a DOM element

Is there a way to enable drag and drop functionality on a dynamically created table using AJAX?

When conducting tests using Selenium and the headless Google Chrome browser in Java, the dynamic JS content fails to load

Extracting information from AJAX calls using a DataTable

Display a particular div when a specific image is present within another div

Expecting a declaration statement for exporting React