Attempted to iterate over an array with the intention of appending an extra key value pair, but ended up only retaining the final value

Question

Attempted to iterate over an array with the intention of appending an extra key value pair, but ended up only retaining the final value

While attempting to create a new array of objects from an existing array that I am iterating through, I seem to only retain the last value. I understand why this is happening, but I am unsure of the best approach to achieve the desired outcome.

var existingThing = ["one","two","three"];

var thingtoAdd = {};

var newthing = [];

for (var i = 0; i < existingThing.length; i++) {

    thingtoAdd.key = existingThing[i];
    thingtoAdd.value = existingThing[i];
    thingtoAdd.selected = "true";
    newthing.push(thingtoAdd);
}

console.log(JSON.stringify(newthing));

The resulting output is:

[{"key":"three","value":"three","selected":"true"},
{"key":"three","value":"three","selected":"true"},
{"key":"three","value":"three","selected":"true"}]

javascript arrays

Answer 1

Answer №1

Revise your script to:

let existingItems = ["red","blue","green"];

let newItems = [];

for (let i = 0; i < existingItems.length; i++) {

    let itemToAdd = {};

    itemToAdd.key = existingItems[i];
    itemToAdd.value = existingItems[i];
    itemToAdd.selected = "true";
    newItems.push(itemToAdd);
}

console.log(JSON.stringify(newItems));

You are updating the same object itemToAdd repeatedly because it's defined in the outer loop scope. By placing it inside the inner loop block, a new object is created during each iteration with the appropriate values.

Answer 2

Revise your script to:

let existingItems = ["red","blue","green"];

let newItems = [];

for (let i = 0; i < existingItems.length; i++) {

    let itemToAdd = {};

    itemToAdd.key = existingItems[i];
    itemToAdd.value = existingItems[i];
    itemToAdd.selected = "true";
    newItems.push(itemToAdd);
}

console.log(JSON.stringify(newItems));

You are updating the same object itemToAdd repeatedly because it's defined in the outer loop scope. By placing it inside the inner loop block, a new object is created during each iteration with the appropriate values.

Answer 3

Answer №2

Make sure to clear out the object called thingToAdd after adding it to the new array

for (var i = 0; i < existingThing.length; i++) {

    thingtoAdd.key = existingThing[i];
    thingtoAdd.value = existingThing[i];
    thingtoAdd.selected = "true";
    newthing.push(thingtoAdd);
    thingToAdd = {};
}

Answer 4

Make sure to clear out the object called thingToAdd after adding it to the new array

for (var i = 0; i < existingThing.length; i++) {

    thingtoAdd.key = existingThing[i];
    thingtoAdd.value = existingThing[i];
    thingtoAdd.selected = "true";
    newthing.push(thingtoAdd);
    thingToAdd = {};
}

Answer 5

Answer №3

Whenever you add an object to the array newthing by pushing it, you're actually only adding a reference to that object, "thingtoAdd". This means that when you update the object in later iterations of your for loop, you're directly updating the original object. As a result, the array contains multiple references to the same object, leading to duplicates or all objects having the last updated value.

To create new instances of the object each time, you need to empty the object. If you place a debugger inside the for loop and inspect the "newthing" array, you will see this behavior.

var obj = { val: 5 }
function increment(obj) {
    obj.val++
}
increment(obj)

When you run the above function, the value of obj will be incremented with each call.

function increment(val) {
   val++
}
val = 5
increment(val)
alert(val)

In contrast, in the second example, the variable val remains unchanged. This difference lies in the fact that in the first case, the object referenced by obj is modified, while in the second case, only the variable val is changed.

Answer 6

Whenever you add an object to the array newthing by pushing it, you're actually only adding a reference to that object, "thingtoAdd". This means that when you update the object in later iterations of your for loop, you're directly updating the original object. As a result, the array contains multiple references to the same object, leading to duplicates or all objects having the last updated value.

To create new instances of the object each time, you need to empty the object. If you place a debugger inside the for loop and inspect the "newthing" array, you will see this behavior.

var obj = { val: 5 }
function increment(obj) {
    obj.val++
}
increment(obj)

When you run the above function, the value of obj will be incremented with each call.

function increment(val) {
   val++
}
val = 5
increment(val)
alert(val)

In contrast, in the second example, the variable val remains unchanged. This difference lies in the fact that in the first case, the object referenced by obj is modified, while in the second case, only the variable val is changed.

Answer 7

Answer №4

    let currentItems = ["apple","banana","orange"];

let newItems = [];

for (let i = 0; i < currentItems.length; i++) {
    let itemToAdd = {};
    itemToAdd.key = currentItems[i];
    itemToAdd.value = currentItems[i];
    itemToAdd.selected = "true";
    newItems.push(itemToAdd);
}

console.log(JSON.stringify(newItems));

Answer 8

    let currentItems = ["apple","banana","orange"];

let newItems = [];

for (let i = 0; i < currentItems.length; i++) {
    let itemToAdd = {};
    itemToAdd.key = currentItems[i];
    itemToAdd.value = currentItems[i];
    itemToAdd.selected = "true";
    newItems.push(itemToAdd);
}

console.log(JSON.stringify(newItems));

Attempted to iterate over an array with the intention of appending an extra key value pair, but ended up only retaining the final value

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

PHP array_merge replaces its original content

The git clone operation encounters a problem with the error message: unable to connect, connection refused on localhost port 80

I'm looking for a way to have an element shift in a particular direction only when two keys are pressed simultaneously

Is there a radio button that can dynamically update and modify the current view?

Select a user at random from the reactions in the message

"Redirecting visitors based on their location using GeoIP targeting for

Utilize JavaScript to randomly choose images as background tiles in HTML

To combine both jquery-1.min.js and jquery.min.js is essential for achieving optimal functionality

Having trouble setting up Node.js on a Mac computer

Issue with Angular routing not functioning properly post form submission

Spin a Collada model on its y-axis

Struggling with passing data to a child component in React

Trouble with unproductive downtime in ReactJS and JavaScript

Execute an asynchronous request using Javascript to communicate with a Spring Controller

Obtain the values from controls within the <td> element

Manipulating the content of a specific row's table cells with a text box in jQuery Datatables

The requested page for angular-in-memory-web-api could not be located within the Angular 4.2.2 CLI web-api functionality

NodeJs: Transforming strings into UUID v4 efficiently

Is there a method for the parent to detect changes in its output when passing around complex objects to its child?

Cyclic Character Array Buffer - C