Manipulating an element in the JSON data is causing alterations to the preceding elements

Question

Manipulating an element in the JSON data is causing alterations to the preceding elements

I am facing a challenge with two JSON arrays.

 $scope.arr1 = [
            { "id": 1, "first_name": "Philip", "last_name": "Kim", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e6e7577732e5e737b7a777f78776c7b307d7173">[email protected]</a>", "country": "Indonesia", "ip_address": "29.107.35.8" },
            { "id": 2, "first_name": "Judith", "last_name": "Austin", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="543e352127203d3a651439352425213127207a373b39">[email protected]</a>", "country": "China", "ip_address": "173.65.94.30" },
            { "id": 3, "first_name": "Julie", "last_name": "Wells", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="117b66747d7d622351787d7d787f7e78623f747564">[email protected]</a>", "country": "Finland", "ip_address": "9.100.80.145" },
            { "id": 4, "first_name": "Gloria", "last_name": "Greene", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fefeebfcfcf7fcaad9fbf5f6feeab7faf6f4">[email protected]</a>", "country": "Indonesia", "ip_address": "69.115.85.157" },
            { "id": 5, "first_name": "Andrea", "last_name": "Greene", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a7a1b4a3a3a8a3f286a0a2a7e8a1a9b0">[email protected]</a>", "country": "Russia", "ip_address": "128.72.13.52" }]

$scope.arr2=[];

I aim to transfer elements from arr1 to arr2 one by one based on specific conditions.

var object;
var temp = {};

  for (var i in $scope.arr1) {
    object = $scope.arr1[i];
       for (var property in object) {

            temp2 = object.id + '_' + property;
            if ($scope.someOtherData.indexOf("unhighlighted") != -1) {
               temp[property] = "";

              }
             else {

               temp[property] = object[property];

             }
          }
        $scope.arr2.push(temp);
      }

My primary inquiry is regarding the issue I encounter when pushing values from temp to arr2. Subsequent pushes result in all elements in arr2 taking the last temp value. How can this be resolved?

Secondly, I have noticed the spontaneous occurrence of adding $$hashKey attribute to arr1. Is there a way to prevent this from happening?

javascript angularjs json loops

Answer 1

Answer №1

One of the issues arises from how JavaScript handles objects, as they are passed by reference. To explain, in your code, variable temp is declared globally within the loops. This means that when you update the values of temp in the second loop, you are actually updating the same object that was pushed into the array. Essentially, you are pushing the same object multiple times into the array, and any changes made to one will affect all instances since they all point to the same object.

To address this issue, here are two fixes:

1) As others have suggested, create a new object in each iteration of the loop so that there are no reference issues. The updated code would look like this:

   for (var i in $scope.arr1) {
    object = $scope.arr1[i];
    var temp = {};  // creating new object in every loop
    for (var property in object) {
      //your stuff

2) Prior to pushing the object into the array, make a clone of it to ensure that new objects are added each time. The revised code would be as follows:

 var newObject = Object.clone(temp); // create a new object by cloning
   $scope.arr2.push(newObject );

Answer 2

One of the issues arises from how JavaScript handles objects, as they are passed by reference. To explain, in your code, variable temp is declared globally within the loops. This means that when you update the values of temp in the second loop, you are actually updating the same object that was pushed into the array. Essentially, you are pushing the same object multiple times into the array, and any changes made to one will affect all instances since they all point to the same object.

To address this issue, here are two fixes:

1) As others have suggested, create a new object in each iteration of the loop so that there are no reference issues. The updated code would look like this:

   for (var i in $scope.arr1) {
    object = $scope.arr1[i];
    var temp = {};  // creating new object in every loop
    for (var property in object) {
      //your stuff

2) Prior to pushing the object into the array, make a clone of it to ensure that new objects are added each time. The revised code would be as follows:

 var newObject = Object.clone(temp); // create a new object by cloning
   $scope.arr2.push(newObject );

Answer 3

Answer №2

Ensure to initialize the variable temp before entering the for loop:

for (var i in $scope.arr1) {
   object = $scope.arr1[i];
   var temp = {};  //<--------make sure to declare it here
   for (var property in object) {

Answer 4

Ensure to initialize the variable temp before entering the for loop:

for (var i in $scope.arr1) {
   object = $scope.arr1[i];
   var temp = {};  //<--------make sure to declare it here
   for (var property in object) {

Answer 5

Answer №3

To avoid updating the same object by reference, it's important to create a new object for each iteration.

Currently, you are repeatedly adding the same object to array2 which results in having multiple copies of the same object in array 2.

// Use this method to prevent using the same object
var temp = {};
for (var property in object) {
     // Add code here to avoid copying unnecessary properties
     if(object.hasOwnProperty(property))
     {         
        ... 
     }

Answer 6

To avoid updating the same object by reference, it's important to create a new object for each iteration.

Currently, you are repeatedly adding the same object to array2 which results in having multiple copies of the same object in array 2.

// Use this method to prevent using the same object
var temp = {};
for (var property in object) {
     // Add code here to avoid copying unnecessary properties
     if(object.hasOwnProperty(property))
     {         
        ... 
     }

Manipulating an element in the JSON data is causing alterations to the preceding elements

Answer №1

Answer №2

Answer №3

Similar questions

reveal.js: Upon a fresh installation, an error has been encountered: ReferenceError - 'navigator'

Using setTimeout with drag and drop functionality in HTML

Utilizing JavaScript to call functions from an ASP.NET code file

Tips for displaying the overlay in a jQuery UI modal dialog

Using a split string to destructure an array with a mix of let and const variables

Having difficulty with Axios due to the URL containing a potent # symbol

Determine the character count of the text within an *ngFor loop

Alter the value of a key within a JSON object at a specific nested level using Node.js or JavaScript

Error alert: The system could not locate Google when trying to drop pins

Retrieving information within a Vue component

The icons from FontAwesome in Vue do not update when computed

Click-triggered CSS animations

Adding an array to JSON using PHP

Struggling to retrieve the value in Node.js

Using an element with the href property in conjunction with react-router: a comprehensive guide

Determine the value above a certain price point by utilizing JSON operators

Error in Protractor HTML screenshot reporter displaying message as 'undefined'

What could be the reason for the unexpected outcome when checking if display is equal to "none"?

Utilizing Chart.js for generating a sleek and informative line graph

Experiment with the Users.Get function available in vk-io