Push multiple objects to an already initialized, empty object array

Question

People is my model, data is my new information, and the forEach is how I am trying to insert the new data into my model, but formatted to only the information I care about

people = [{name: '', age: 0}];

data = [
  {id: '123', name: 'Bob', lastName: 'Guy', age: 40}, 
  {id: '321', name: 'Michael', lastName: 'Park', age: 20}, 
]

data.forEach(person => {
   people.push({
      name: person.name,
      age: person.age,
   });
});

However, the result I get is this:

people = [
  {name: '', age: 0}, 
  {name: 'Bob', age: 40}, 
  {name: 'Michael', age: 20}
];

I'm trying to have the object array look like this instead:

people = [
  {name: 'Bob', age: 40}, 
  {name: 'Michael', age: 20}
];

However, I would like to know if theres a way to do it without an extra line of code (like popping the first element), and if theres a way to do it in one command? If not, I am open to suggestions. Thank you!

The array you're pushing to has the object w/ the empty name/0 age--if you don't want it there why do you put it there? Are you asking how to have a default array if data is empty? — Dave Newton
– Dave Newton, Commented Jul 27, 2022 at 16:59
@DaveNewton I thought I needed to initialize the object before storing information in it. I tested it and it looks like I did not have to do that — webdesignnoob
– webdesignnoob, Commented Jul 27, 2022 at 17:03
@webdesignnoob You do need to create the array you're pushing into, but it can be empty. That said, you can do a map, e.g., const people = data.map(({ name, age }) => ({ name, age })) — Dave Newton
– Dave Newton, Commented Jul 27, 2022 at 17:05

Ele · Accepted Answer · 2022-07-27 17:38:45Z

You're using the original array and not only that but also you're mutating the array.

You can use the function Array.prototype.map in order to generate a new array with the desired data.

const people = [{name: '', age: 0}];

const data = [
  {id: '123', name: 'Bob', lastName: 'Guy', age: 40}, 
  {id: '321', name: 'Michael', lastName: 'Park', age: 20}, 
]

const result = data.map(person => ({
  name: person.name,
  age: person.age,
}));

console.log(result);

You can also keep the desired keys and by using the functions Array.prototype.map and Array.prototype.reduce you can build the expected result:

const model = ["name", "age"];
const data = [
  {id: '123', name: 'Bob', lastName: 'Guy', age: 40}, 
  {id: '321', name: 'Michael', lastName: 'Park', age: 20}, 
]

const result = data.map(person => model.reduce((r, m) => ({...r, [m]: person[m]}), {}), []);

console.log(result);

Jose Aviles · Accepted Answer · 2022-07-27 17:53:02Z

Just in case you need to implement different person models, you can dinamically create the objects like this

peopleModel = [{ name: "", age: 0 }];

data = [
  { id: "123", name: "Bob", lastName: "Guy", age: 40 },
  { id: "321", name: "Michael", lastName: "Park", age: 20 },
];

const keysArr = Object.keys(peopleModel[0]);
const totalKeys = keysArr.length;

const people = data.reduce((acc, personObj) => {
  const obj = {};
  keysArr.forEach((key) => {
    if (personObj[key]) {
      obj[key] = personObj[key];
    }
  });
  acc.push(obj);
  return acc;
}, []);

console.log(people);

/* logs [
  {name: 'Bob', age: 40}, 
  {name: 'Michael', age: 20}
];
*/

but if you need a different model like

peopleModel = [{ name: "", age: 0, lastName: "" }]

you will get for the log the following:

[
      {name: 'Bob', age: 40, lastName: 'Guy'}, 
      {name: 'Michael', age: 20, lastName: 'Park'}
    ];

that way you do not need to hardcode the keys

Collectives™ on Stack Overflow

Push multiple objects to an already initialized, empty object array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related