In javascript How to push the Same object Twice into an array with some modification without overriding the array

Question

I am trying to push the same object into an array with some modification to the object. But when i do modification and push the object the first object which is in array is getting overrided.

var details = [{"name":"john","id":2,"personalEmail":"[email protected]","workEmail":"[email protected]"}];    var searchData = "joh";
var pattern1 = new RegExp("(?:^|[\\s\@])"+searchData, "i");
var data = [];
for(var i=0;i<details.length;i++){
  var name = details[i].name;
  if(pattern1.test(name)){
   var dom = name.replace(name.match(pattern1), '<strong>'+ name.match(pattern1) + '</strong>');
   details[i].name = dom;        
   data.push(details[i]);
   console.log("first ::::"+JSON.stringify(data));
   if(details[i].workEmail != null){
 details[i].personalEmail = details[i].workEmail;
     data.push(details[i]);
     console.log("second::::"+JSON.stringify(data));
   }
  }
}

Here is the fiddle http://jsfiddle.net/LQg7W/2311/. We can see the output in Console (F12 Console tab).

Output Getting:

second::::[{"name":"<strong>joh</strong>n","id":2,"personalEmail":"[email protected]","workEmail":"[email protected]"},{"name":"<strong>joh</strong>n","id":2,"personalEmail":"[email protected]","workEmail":"[email protected]"}]

Expected Output:

second::::[{"name":"<strong>joh</strong>n","id":2,"personalEmail":"[email protected]","workEmail":"[email protected]"},{"name":"<strong>joh</strong>n","id":2,"personalEmail":"[email protected]","workEmail":"[email protected]"}]

score 2 · Answer 1 · edited May 23 '17 at 12:07

Javascript uses references for objects. As such, in your array, you're adding a reference to your first object, and then you're adding a second reference to the same object. Basically, there's only one object, and two references (kind of like a single file on a filesystem with two shortcuts to it) and so any change you make will appear for all references of that object.

You need to copy your object and then edit the copy. Check out this question: How do I correctly clone a JavaScript object?

....or just use a library like Underscore to accomplish copying. (Edit: Underscore doesn't actually have native support for deep copying, but lodash does - and you should probably be using that anyway.)

Used Underscore Js to Accomplish copying. – Cindrella Nov 14 '13 at 05:35 — Cindrella, Nov 14 '13 at 05:35

score 0 · Accepted Answer · answered Nov 14 '13 at 04:52

0

Javascript objects are passed by the reference , so the two objects are the same but two references. You need to make a clone of the object for your requirement.
if you are using JQuery ,

var newObject = jQuery.extend(true, {}, details[i]);

answered Nov 14 '13 at 04:52

Jayantha Lal Sirisena

21,216
11
71
92

Tried to create new object. But of no use. I amnot that good at javascript. Please correct me If I did in wrong way. http://jsfiddle.net/LQg7W/2314/ – Cindrella Nov 14 '13 at 05:07
Already tried that way. but its giving the same output. Please check output in console. For console statement that starts with "second..", first object i want personal email as [email protected] – Cindrella Nov 14 '13 at 05:11
I think you have given previous fiddle link.not an updated one – Cindrella Nov 14 '13 at 05:22
Its Still Same output. – Cindrella Nov 14 '13 at 05:32
It's not the same output ,http://jsfiddle.net/LQg7W/2317/ first `::::[{"name":"john","id":2,"personalEmail":"[email protected]","workEmail":"[email protected]"}]` second `::::{"name":"john","id":2,"personalEmail":"[email protected]","workEmail":"[email protected]"} ` – Jayantha Lal Sirisena Nov 14 '13 at 05:35
Ah yes. My mistake. But we are already using underscore js. So used Underscore clone method to copy it. – Cindrella Nov 14 '13 at 05:37

score 0 · Answer 3 · answered Nov 14 '13 at 04:55

0

It's the essentials of javascript. Treat all objects as reference type. To do your task you need to create new object and push it into array.

answered Nov 14 '13 at 04:55

unconnected

991
1
10
21

In javascript How to push the Same object Twice into an array with some modification without overriding the array

3 Answers3