Vue CLI how to delete Object keys without deleting the main source obj

Question

I have this object an array which holds the data that will be used to a loop that creates elements

The data:

callList : [
            {'Agent Name':'AB Ferrancullo','Call ID':'s',ANI:'3',DNIS:'4043','Call Queue':'Paymaya','Call Type':'INBOUND','Call Start':'8/12/2019 7:48:15 AM','test':'1',Duration : '1427','Final Grade':75,'Evaluted By':'Arnulfo','Evaluation Date':'August 13,2019'},
            {'Agent Name':'AB Ferrancullo','Call ID':'d',ANI:'2',DNIS:'4043','Call Queue':'Paymaya','Call Type':'INBOUND','Call Start':'8/12/2019 12:32:40 PM','test':'2',Duration : '403','Final Grade':100,'Evaluted By':'Angelo','Evaluation Date':'August 14,2019'},
            {'Agent Name':'AB Ferrancullo','Call ID':'1',ANI:'5',DNIS:'7788','Call Queue':'Paymaya','Call Type':'INBOUND','Call Start':'8/12/2019 9:46:39 AM','test':'3',Duration : '605','Final Grade':50,'Evaluted By':'John','Evaluation Date':'August 15,2019'}
        ]

The loop:

<div class="col-sm-3" v-for="(call) in callList" :key="call.id">
                    <div class="card">
                        <div class="card-header fc-white" :class="[call['Final Grade'] >= 75 ? 'pqm-green' : 'bg-red']">
                            <h6 class="m-0">{{call['Agent Name']}}</h6>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title mb-2"><b class="mr-1">Final Grade:</b>{{call['Final Grade']}}</h5>
                            <p class="m-0"><b class="mr-1">Evaluated By:</b> {{call['Evaluted By']}}</p>
                            <p><b class="mr-1">Evaluated Date:</b> {{call['Evaluation Date']}}</p>
                            <a data-toggle="modal" data-target="#modal-rate" @click="removeKeys(call)" class="btn btn-success pqm-green float-right fc-white"><i class="fal fa-search"></i> View Details</a>
                        </div>
                    </div>
                </div>

I have a function that replicates the object to delete certain keys that will not be used

removeKeys : function(obj){
        var tempobj = obj
        var keysToDelete = Object.keys(tempobj).splice(-3);
        keysToDelete.forEach(k => $delete(tempobj,k));
        this.awit = tempobj;
        // console.log(callList);
    }

but upon checking the callList the keys that was remove in tempObj was also remove which creating a problem in my UI. Is there something I missing? or a workaround here

where do you replicate ? You mean copy? All you do is assign the reference to another var - so 2 vars one object. Can you explain: `the keys that was remove in tempObj was also remove which creating a problem in my UI.` i think a word is missing? — Estradiaz, Aug 16 '19 at 07:36
@Estradiaz What I mean is I made an assurance for the `tempobj` for testing purpose. When I remove object keys in `tempobj` that keys also deleted in `callList` — Vian Ojeda Garcia, Aug 16 '19 at 07:37
For testing you should create a constructor function to build new objects from - so you dont have to do weird copies for/from each context/scope — Estradiaz, Aug 16 '19 at 07:48
Possible duplicate of [How do I correctly clone a JavaScript object?](https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object) — Estradiaz, Aug 16 '19 at 07:53

score 1 · Answer 1 · answered Aug 16 '19 at 07:38

With var tempobj = obj you are creating shallow copy that comes with reference to object, so both objects are changed.

You should do deep copy with var tempobj = JSON.parse(JSON.stringify(obj))

Also you can check lodash https://lodash.com/docs/4.17.15 and its omit and pick helper functions

Vue CLI how to delete Object keys without deleting the main source obj

1 Answers1