Solved

Help me understand variable pointers in javascript

Posted on 2010-09-17
4
354 Views
Last Modified: 2012-05-10
So, I'm trying to write some code that pulls an object from an array. I was expecting this object to go into it's own variable where I could make changes to it, and then write it somewhere else, without affecting the original object.

However, as you'll see in the attached code, the changes I make to what I thought was a *copy* of the object, also occur to the original. What do I need to do differently to make this work?

I tried using splice, but got the same result. I have tested this in Firefox and Safari with the same results.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
	<script type="text/javascript">/*<![CDATA[*/ 
		var dir_list = {address: '', name: 'root', filetype: 'Directory', size: '13.36 GB', date: '03/31/2010 15:03 pm', contains: [
			{address: 'Bunnie JamboreeTHANK YOU.pdf', name: 'Bunnie JamboreeTHANK YOU.pdf', filetype: 'pdf', size: '9036.64 GB', date: '03/31/2010 15:00 pm', contains: null},
			{address: 'coupons/', name: 'coupons', filetype: 'Directory', size: '10.93 GB', date: '01/10/2010 14:54 pm', contains: []},
			{address: 'ice_guidelines.pdf', name: 'ice_guidelines.pdf', filetype: 'pdf', size: '3363.79 GB', date: '09/01/2009 00:26 am', contains: null},
			{address: 'images/', name: 'images', filetype: 'Directory', size: '12.14 GB', date: '03/31/2010 15:19 pm', contains: []},
			{address: 'imports/', name: 'imports', filetype: 'Directory', size: '18.21 GB', date: '02/15/2010 14:35 pm', contains: []},
			{address: 'Roxy Reservation Form.doc', name: 'Roxy Reservation Form.doc', filetype: 'doc', size: '1426.29 GB', date: '10/04/2009 15:24 pm', contains: null},
			{address: 'stinger/', name: 'stinger', filetype: 'Directory', size: '6.07 GB', date: '01/10/2010 15:20 pm', contains: []},
			{address: 'Wpg Ringette.PDF', name: 'Wpg Ringette.PDF', filetype: 'PDF', size: '44989.93 GB', date: '11/19/2009 04:02 am', contains: null}
		]};
		
		$(document).ready(function(){
			var x = dir_list.contains[3];
			x.address = "test";
			
			console.log(x);
			console.log(dir_list);
		});
	/*]]>*/</script>
	<link rel="stylesheet" href="css/jquery.clickonce.editor.css" media="screen" type="text/css" />
	<link rel="stylesheet" href="css/jquery-ui-1.8.2.custom.css" media="screen" type="text/css" />
</head>
<body>
</body>
</html>

Open in new window

0
Comment
Question by:dirknibleck
  • 2
4 Comments
 
LVL 19

Accepted Solution

by:
daveamour earned 300 total points
Comment Utility
Try the attached code with the credit going to:
http://my.opera.com/GreyWyvern/blog/show.dml/1725165

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Test</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

	<script type="text/javascript">/*<![CDATA[*/ 

		var dir_list = {address: '', name: 'root', filetype: 'Directory', size: '13.36 GB', date: '03/31/2010 15:03 pm', contains: [

			{address: 'Bunnie JamboreeTHANK YOU.pdf', name: 'Bunnie JamboreeTHANK YOU.pdf', filetype: 'pdf', size: '9036.64 GB', date: '03/31/2010 15:00 pm', contains: null},

			{address: 'coupons/', name: 'coupons', filetype: 'Directory', size: '10.93 GB', date: '01/10/2010 14:54 pm', contains: []},

			{address: 'ice_guidelines.pdf', name: 'ice_guidelines.pdf', filetype: 'pdf', size: '3363.79 GB', date: '09/01/2009 00:26 am', contains: null},

			{address: 'images/', name: 'images', filetype: 'Directory', size: '12.14 GB', date: '03/31/2010 15:19 pm', contains: []},

			{address: 'imports/', name: 'imports', filetype: 'Directory', size: '18.21 GB', date: '02/15/2010 14:35 pm', contains: []},

			{address: 'Roxy Reservation Form.doc', name: 'Roxy Reservation Form.doc', filetype: 'doc', size: '1426.29 GB', date: '10/04/2009 15:24 pm', contains: null},

			{address: 'stinger/', name: 'stinger', filetype: 'Directory', size: '6.07 GB', date: '01/10/2010 15:20 pm', contains: []},

			{address: 'Wpg Ringette.PDF', name: 'Wpg Ringette.PDF', filetype: 'PDF', size: '44989.93 GB', date: '11/19/2009 04:02 am', contains: null}

		]};



        Object.prototype.clone = function() {

          var newObj = (this instanceof Array) ? [] : {};

          for (i in this) {

            if (i == 'clone') continue;

            if (this[i] && typeof this[i] == "object") {

              newObj[i] = this[i].clone();

            } else newObj[i] = this[i]

          } return newObj;

        };

		

		$(document).ready(function(){

			var temp = dir_list.clone();

            

            var x = temp.contains[3];

			

            alert(dir_list.contains[3].address);



            x.address = "test";



            alert(x.address);



            alert(dir_list.contains[3].address);

		});

	/*]]>*/</script>

	<link rel="stylesheet" href="css/jquery.clickonce.editor.css" media="screen" type="text/css" />

	<link rel="stylesheet" href="css/jquery-ui-1.8.2.custom.css" media="screen" type="text/css" />

</head>

<body>

</body>

</html>

Open in new window

0
 
LVL 14

Assisted Solution

by:sam2912
sam2912 earned 200 total points
Comment Utility
You are using jQuery, so try this instead:
http://api.jquery.com/jQuery.extend/
var x= jQuery.extend(true, {}, dir_list.contains[3]);

Open in new window

0
 
LVL 15

Author Comment

by:dirknibleck
Comment Utility
Is this a new feature for splitting points, or did I complete the form wrong?
0
 
LVL 14

Expert Comment

by:sam2912
Comment Utility
This is the first time I'm seeing a close request for allocation of points
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now