Using the "push" method to create an array of objects in Javascript

Question

Using the "push" method to create an array of objects in Javascript

I am relatively new to Javascript and I've encountered an issue in my code that I can't quite figure out.

My objective is to build an array of "people" where each person has specific information such as an "id" and a "name". Since I don't know the exact number of "people" ahead of time, I'm using the "push" method whenever I need to add another individual. The problem arises when all the entries in my array end up reflecting the data of the latest person added.

Below are the declarations I'm working with:

var ppl_arr = [];
var profile = {
  id: 10000,
  name: "",
};

profile.id = 3;

ppl_arr.push(profile);
alert(ppl_arr[0].id + "\t" + ppl_arr.length);

profile.id = 5;
ppl_arr.push(profile);
alert(ppl_arr[0].id + "\t" + ppl_arr[1].id + "\t" + ppl_arr.length);

The first alert functions correctly: "3 1"
However, the second alert outputs: "5 5 2" instead of the expected "3 5 2"

Essentially, I'm successfully adding two individuals to my array, but it seems like the data for the second person overrides the first one. Can anyone shed some light on what's happening here?

javascript arrays object

Answer 1

Answer №1

Instead of simply changing the id of the existing object and adding it to the array multiple times, a better approach would be to create instances of 'people' objects using a constructor function like the one shown below:

// Constructor function for creating Person objects
function Person(id, name) {
    this.Id = id;
    this.Name = name;
}

Then you can populate an array with these Person objects as follows:

var peopleArr = [];

peopleArr.push(new Person(3, "Bob")); // Add Bob to the array

alert(peopleArr[0].Id + " - " +  peopleArr.length); // Outputs "3 - 1"

peopleArr.push(new Person(5, "Steve")); // Add Steve to the array

alert(peopleArr[0].Id + "\t" + peopleArr[1].Id + "\t" + peopleArr.length); // Outputs "3  5  2"

Answer 2

Instead of simply changing the id of the existing object and adding it to the array multiple times, a better approach would be to create instances of 'people' objects using a constructor function like the one shown below:

// Constructor function for creating Person objects
function Person(id, name) {
    this.Id = id;
    this.Name = name;
}

Then you can populate an array with these Person objects as follows:

var peopleArr = [];

peopleArr.push(new Person(3, "Bob")); // Add Bob to the array

alert(peopleArr[0].Id + " - " +  peopleArr.length); // Outputs "3 - 1"

peopleArr.push(new Person(5, "Steve")); // Add Steve to the array

alert(peopleArr[0].Id + "\t" + peopleArr[1].Id + "\t" + peopleArr.length); // Outputs "3  5  2"

Answer 3

Answer №2

Question #1:

alert(ppl_arr[0].id + ppl_arr.length);

will show the total, not the combination - test

alert(ppl_arr[0].id.toString().concat(ppl_arr.length));

Question #2:

Modifying the id attribute of an existing object changes it directly, rather than making a copy. Therefore, any changes to the id affect the object stored in the array as well. To resolve this, you would need to:

var ppl_arr = [];
var profile = {
  id: 10000,
  name: " ",
};

profile.id=3;
ppl_arr.push(profile);

//Create a new profile
var profile2 = { 
  id: 10000,
  name: " ",
};

profile2.id=5;
ppl_arr.push(profile2);

Answer 4

Question #1:

alert(ppl_arr[0].id + ppl_arr.length);

will show the total, not the combination - test

alert(ppl_arr[0].id.toString().concat(ppl_arr.length));

Question #2:

Modifying the id attribute of an existing object changes it directly, rather than making a copy. Therefore, any changes to the id affect the object stored in the array as well. To resolve this, you would need to:

var ppl_arr = [];
var profile = {
  id: 10000,
  name: " ",
};

profile.id=3;
ppl_arr.push(profile);

//Create a new profile
var profile2 = { 
  id: 10000,
  name: " ",
};

profile2.id=5;
ppl_arr.push(profile2);

Using the "push" method to create an array of objects in Javascript

Answer №1

Answer №2

Similar questions

Top guidelines for formatting an npm module

Retrieve a value from a list in robot automation framework

Is there a way I can utilize canvas to overlay one image onto another?

Steps on removing a file type from a Material UI textfield

What is the correct way to define a function parameter when using AngularJS Emit?

designing a visually appealing pre-loader page that appears before the content loads

How can you determine if a mouseover event is triggered by a touch on a touchscreen device?

What is the best way to continuously call an asynchronous method in native JavaScript until a successful response is received?

Autocomplete's `getOptionLabel` function unexpectedly returned an object ([object Object]) instead of the expected string

Learn the step-by-step process of graphing equations in React similar to Desmos

Is it necessary to make a distinct route for SocketIO implementation?

Overusing For Loops for Cloning in JavaScript

Encountering a bizarre npm issue while attempting to execute npm install for brain.js

Is there a method to condense it further, possibly utilizing recursion? Java

Tips for re-entering data retrieved from mysql into another database table

When I attempt to use document.execCommand("copy"), the line break does not get applied

Is there a way to automatically retrieve CSV data using ashx on a web page?

Using webpack without integrating babel can lead to compatibility issues with certain JavaScript

Integrate Jade mixins programmatically into an Express application using JavaScript

What is the best way to make a CSS class appear in my javascript using the method I have been using before?