SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    529
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to keep two separate arrays but they keep referencing one another

    I'm setting one array like so...

    Code:
    var myArray = [
         { 'Name' : 'Bob',
         'Hats' : [
              { 'Color' : 'Green' },
              { 'Color' : 'Red' },
              { 'Color' : 'Blue' }
         ]
         },
         { 'Name' : 'Tim',
         'Hats' : [
              { 'Color' : 'Yellow' },
              { 'Color' : 'Purple' }
         ]
         }
    ];
    And then I set another variable with the contents of myArray like so...

    Code:
    var anotherArray = myArray.slice();
    When I remove myArray[1], for example, anotherArray[1] stays the same. However, when I remove a Hat the hat is removed from both.

    I'm assuming that slice() takes care of the top level arrays but the nested ones still are linked. Maybe?

    Just trying to find a (hopefully) simple solution to stop the syncing. Thanks!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,051
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by NokX View Post
    And then I set another variable with the contents of myArray like so...

    Code:
    var anotherArray = myArray.slice();
    The problem is that Array.slice() does not create a deep copy (rather a shallow one) and is therefore not suitable for multidimensional arrays.

    One way round this is to serialize the entire array to JSON and then de-serialize it back:

    Code:
    var myArray = [
         { 'Name' : 'Bob',
         'Hats' : [
              { 'Color' : 'Green' },
              { 'Color' : 'Red' },
              { 'Color' : 'Blue' }
         ]
         },
         { 'Name' : 'Tim',
         'Hats' : [
              { 'Color' : 'Yellow' },
              { 'Color' : 'Purple' }
         ]
         }
    ];
    
    var anotherArray = JSON.parse(JSON.stringify(myArray));
    
    myArray[0]["Hats"].pop();
    
    console.log(myArray, anotherArray);
    Ref: http://stackoverflow.com/questions/1...a-shallow-copy

  3. #3
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    529
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    The problem is that Array.slice() does not create a deep copy (rather a shallow one) and is therefore not suitable for multidimensional arrays.

    One way round this is to serialize the entire array to JSON and then de-serialize it back:

    Code:
    var myArray = [
         { 'Name' : 'Bob',
         'Hats' : [
              { 'Color' : 'Green' },
              { 'Color' : 'Red' },
              { 'Color' : 'Blue' }
         ]
         },
         { 'Name' : 'Tim',
         'Hats' : [
              { 'Color' : 'Yellow' },
              { 'Color' : 'Purple' }
         ]
         }
    ];
    
    var anotherArray = JSON.parse(JSON.stringify(myArray));
    
    myArray[0]["Hats"].pop();
    
    console.log(myArray, anotherArray);
    Ref: http://stackoverflow.com/questions/1...a-shallow-copy
    Gotcha. I figured it wasn't digging in deep into the structure and I assumed there had to be an easier way. The way you showed is just what I needed. Thank you!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •