How To copy object by value using jquery

Question

Hello I'm having an issue with this check box :

<input type="checkbox" id="hideTempSeries" checked="checked" value="0" /> 
     Temperature <br />
<input type="checkbox" id="hideFlowSeries" checked="checked" value="1" /> 
     Flow <br />
<input type="checkbox" id="hidePressSeries" checked="checked" value="2"/> 
     Pressure <br /> 
<input type="checkbox" id="hideCondSeries" checked="checked" value="3" /> 
     Conductivity  <br />

.. and this jQuery function that sends an array of this check box values to a function called removePanes(checkedArray) " every time any of the check boxes have changed "

   $("#tools :checkbox").change(function(){
       if($(this).prop('checked')){// when Checked

       }
       else{// when unChecked
       var checkedArray = [] ; 
        $("#tools :checkbox").each(function(index,value){
           if($(this).prop('checked') == false){checkedArray.push($(this).val())}

        });
        removePanes(checkedArray) ;
       }

removePanes() function

   function removePanes(id){
       var removeUncheckedSeries = $.map(newSeries , function(index,value){
        for(var i=0 ; i < id.length ; i++){  
            if(index.yAxis == id[i])return null;
        }  
       return index ;
       });
       var modified = $.map(removeUncheckedSeries, function(index,value) {
        index.yAxis = 15 ; 
        return index ;
       });
      console.log(modified) ;
    } ;

this is newSeries[] Object

The removePanes(checkedArray) function then takes this array and removes all the objects equivalent to the unchecked values from : newSeries[] object

Then it sets all the yAxis values equal to 15.

This function is not working.

Because each time the check box changed the function doesn't reload the newSeries[] object it just modifies it on the last change.

What it does is, the first click works fine and then it set all the yAxis to 15. When I unchecked any other boxes since all the yAxis equal to 15 and the jQuery array send value from 0 to 3 nothing happened.

QUESTION: How can i make the removePanes(checkedArray) reload with the newSeries[] object each time a change on check box trigger?

a simplified demo in [jsfiddle](http://fiddle.jshell.net/) would help, not really clear what the issue is — charlietfl, Jun 19 '12 at 14:41

score 3 · Accepted Answer · edited May 23 '17 at 12:22

3

That is happening because objects are by default copied by reference in Javascript.

So if you change any property of copied object from anywhere it will affect all others. To copy an object by value only(or clone) you can use jQuery's $.extend() method like Jonh Resig(Yes he himself) showed here https://stackoverflow.com/a/122704/344304

var newObj = $.extend(true, {}, oldObj); // deep copy

So change your removePanes function like following

function removePanes(id) {
        var seriesCopy = jQuery.extend(true, {}, newSeries);
        var removeUncheckedSeries = $.map(seriesCopy, function(obj, index) {
            return   $.inArray(obj.yAxis,id) == -1 ? obj : null;
        });
        var modified = $.map(removeUncheckedSeries, function(obj, index) {
            obj.yAxis = 15;
            return obj;
        });
        console.log(modified);
    };

Demo: http://jsfiddle.net/joycse06/w2KS2/

edited May 23 '17 at 12:22

Community

1
1

answered Jun 19 '12 at 14:59

Prasenjit Kumar Nag

13,391
3
45
57

Another idea is using $.extend on page load to simply store the origninal data to a copy, then in change handler when checkbox unchecked use $.extend to update `newseries`. – charlietfl Jun 19 '12 at 15:09
@charlietfl, Yeah that can be done too, I just went with his organization. – Prasenjit Kumar Nag Jun 19 '12 at 15:14
+1 for solution, I was thinking about it also and just threw my concept in – charlietfl Jun 19 '12 at 15:20
@Joy Thanks i never know that about objects :) – Mina Gabriel Jun 19 '12 at 15:33
@charlietfl, I am not quite getting it how the objects can be updated using `$.extend` inside the change handler in this case, as they are not associated with keys. If you dont mind, can you please modify the fiddle with your way, when you have some time, I would like to learn that way too, as it wont need this extra function. Thanks. – Prasenjit Kumar Nag Jun 19 '12 at 15:48
I really didn't dig deep into object from looking at image..poor way to present data – charlietfl Jun 19 '12 at 15:55
Can your way be implemented with the dummy object I used in the fiddle? Because I am feeling somehow This function can be omitted. – Prasenjit Kumar Nag Jun 19 '12 at 15:57

How To copy object by value using jquery

1 Answers1