Adding elements to an array using push method during a loop where elements are

Question

Adding elements to an array using push method during a loop where elements are

After experimenting with this code on jsfiddle, I am puzzled as to why it doesn't generate an array of 5 objects, each with a different id property:

var arr = ["1", "2", "3", "4", "5"];
var clone = {"id": "0", "name":"Matthew"};
var arrObj = [];

var idArr = [];

while((a=arr.pop()) != null){ 
    clone.id = a;
    console.log(clone);
    arrObj.push(clone);
}

console.log(arrObj);

What actually appears in the console is:

Object {id: "5", name: "Matthew"} (index):28
Object {id: "4", name: "Matthew"} (index):28
Object {id: "3", name: "Matthew"} (index):28
Object {id: "2", name: "Matthew"} (index):28
Object {id: "1", name: "Matthew"} (index):28

[Object, Object, Object, Object, Object]

Upon inspection, all 5 cloned objects have an "id" value of "1."

The question remains: Why does this happen?

javascript arrays object while-loop

Answer 1

Answer №1

duplicate is considered an entity in programming terms. In the realm of JavaScript, entities are transferred by way of reference, meaning that distinct values are not being transmitted to each position.

Below is a solution that may prove effective:

while((b=arr.shift()) !== undefined){
    var duplicate = {"num": b, "title":"John"};
    duplicate.num = b;
    objArray.push(duplicate);
}

console.log(objArray);

Outcome:

Array [
    Object {num: "5", title: "John"}
    Object {id: "4", name: "John"}
    Object {id: "3", name: "John"}
    Object {id: "2", name: "John"}
    Object {id: "1", name: "John"}
]

Answer 2

duplicate is considered an entity in programming terms. In the realm of JavaScript, entities are transferred by way of reference, meaning that distinct values are not being transmitted to each position.

Below is a solution that may prove effective:

while((b=arr.shift()) !== undefined){
    var duplicate = {"num": b, "title":"John"};
    duplicate.num = b;
    objArray.push(duplicate);
}

console.log(objArray);

Outcome:

Array [
    Object {num: "5", title: "John"}
    Object {id: "4", name: "John"}
    Object {id: "3", name: "John"}
    Object {id: "2", name: "John"}
    Object {id: "1", name: "John"}
]

Answer 3

Answer №2

In JavaScript, objects are copied by reference which means you need to create duplicates using methods like jQuery.extend.

var numbers = ["1", "2", "3", "4", "5"];
var person = {"id": "0", "name":"Samantha"};
var objectArray = [];

var idArray = [];

while((n=numbers.pop()) != null){ 
    person = $.extend({}, person);
    person.id = n;
    console.log(person);
    objectArray.push(person);
}

console.log(objectArray);

Answer 4

In JavaScript, objects are copied by reference which means you need to create duplicates using methods like jQuery.extend.

var numbers = ["1", "2", "3", "4", "5"];
var person = {"id": "0", "name":"Samantha"};
var objectArray = [];

var idArray = [];

while((n=numbers.pop()) != null){ 
    person = $.extend({}, person);
    person.id = n;
    console.log(person);
    objectArray.push(person);
}

console.log(objectArray);

Answer 5

Answer №3

In the event that your duplicate does not include any functions, you can utilize the following method:

while((a=arr.pop()) != null){
    copy = JSON.parse(JSON.stringify(copy));
    copy.id = a;
    console.log(copy);
    arrObj.push(copy);
}

Answer 6

In the event that your duplicate does not include any functions, you can utilize the following method:

while((a=arr.pop()) != null){
    copy = JSON.parse(JSON.stringify(copy));
    copy.id = a;
    console.log(copy);
    arrObj.push(copy);
}

Adding elements to an array using push method during a loop where elements are

Answer №1

Answer №2

Answer №3

Similar questions

Issue: A child component's function is unable to update the state of the parent component

I am encountering an issue where I am unable to successfully concatenate a string result to a variable within an express router. Instead of receiving the expected

Tips for utilizing both the Element Selector and Class Selector in Jquery

Develop an outline using D3.js for the clipath shape

Issue with retrieving the current location while the map is being dragged

Using multiple instances of the jQuery datepicker within a datalist

The correct method for creating an external JSON file

Why is my data not being sent with the $http POST request in AngularJS?

Resolving the problem of degrading image quality in HTML Canvas

How can you identify changes in localstorage and then trigger the activation of a new boot file or reallocate a value using Vue.js or JavaScript?

Error in finding the element with Selenium webdriver 2.0 was encountered

Guide to Performing Integration Tests on (AngularJS) Web Applications

In what way can a container impact the appearance of a child placed in the default slots?

Navigating between routes with React-router v4: A beginner's guide

AngularJS iu.mask is a powerful tool for validating user input, especially when

Dependency injection in Angular 2 pipes

Implementing Material UI datetime-local feature with no minute selection

problem accessing array values outside of function in JavaScript?

Attempting to call setState (or forceUpdate) on a component that has been unmounted is not permissible in React

The persistent issue with JavaScript variables constantly resetting to zero is causing frustration