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

Retrieving the selected value from a Bootstrap dropdown using JavaScript when there are multiple dropdowns present

What is the best way to upgrade Angular from version 10 to 12?

Integrate the perfect-scrollbar jQuery plugin into RequireJS

Discovering the Power of IONIC with JSON Data Suggestions

Exploring the interaction of karma, jasmine, Angular, and UI router through testing the resolve function when using state.go with parameters

The JSON parser has exceeded the permitted memory allocation of 134217728 bytes and cannot allocate additional 72 bytes, resulting in an error on line 14 of the /home/migrande/public_html/sample.php

Utilize associative arrays to efficiently filter ng-repeat

Is there a way to determine the quantity of items within a sortable div?

Issue with AngularJS factory $http.get request receiving HTML files as response

"What is the best way to eliminate duplicate data from an ng-repeat loop in AngularJS

I encountered an issue while attempting to fetch table data, receiving the following error message: "Uncaught TypeError: result.rows.product is not a function at products.html:134."

Sharing CSS styles among multiple single-page applications (SPAs) developed using the React

Change occurring within a cell of a table that has a width of 1 pixel

The execution of Node.js on data is triggered only after the content has been successfully written

Exploring the varying treatment of the noscript tag across different web browsers

Exploring the power of AutoIt in iterating through a JSON array

JSON encountered a surprise token ? at the beginning position, leading to an error

Create a list with interconnected input fields for duplication

Element mysteriously concealed in certain Safari cases, consistently visible in Firefox and Chrome

Update your mappings for the city of Istanbul when utilizing both TypeScript and Babel