Array and object copy in Javascript

Question

I have the following data :

[
    {"date":1900,"data":[
        {"name":"Blackbird","value":0},
        {"name":"Seagull","value":1},
        {"name":"Sparrow","value":0}
    ]},
    {"date":1910,"data":[
        {"name":"Owl","value":1}
    ]},
    {"date":1920,"data":[
        {"name":"Eagle","value":0},
        {"name":"Albatross","value":2}
    ]}
]

I need to make an incremental array of arrays from it. It should look something like this :

[
    [
        {"name":"Blackbird","value":0,"date":1900},
        {"name":"Seagull","value":1,"date":1900},
        {"name":"Sparrow","value":0,"date":1900}
    ],
    [
        {"name":"Blackbird","value":0,"date":1910},
        {"name":"Seagull","value":1,"date":1910},
        {"name":"Sparrow","value":0,"date":1910},
        {"name":"Owl","value":1,"date":1910}
    ],
    [  
        {"name":"Blackbird","value":0,"date":1920},
        {"name":"Seagull","value":1,"date":1920},
        {"name":"Sparrow","value":0,"date":1920},
        {"name":"Owl","value":1,"date":1920},
        {"name":"Eagle","value":0,"date":1920},
        {"name":"Albatross","value":2,"date":1920}
    ]
]

No matter what I have tried, I always end up with all the dates I add to the objects being equal to the last value (1920 here). I understand that the objects are copied by reference only. I have tried using array.map() (like in the answer given here, but my question was not formulated right), but I still get the same problem.

EDIT Here's one example of code I've tried :

        var temp = [];
        var b = data.map(function(c, index, main) {
            var year = c.date;
            temp = [];
            main.slice(0, index + 1).map(function(d){
                var t = d.data.map(function(e){
                    e.date = year;
                    return e;
                });
                temp = temp.concat(t);
            });
            return temp;
        });
        console.log(b);

since there's only 2-3 props, just make a new object via a literal on each iteration. something like {name: o.name, value: o.value, date: x.date} — dandavis
– dandavis, Commented Jan 19, 2016 at 21:23

Marcos Casagrande · Accepted Answer · 2016-01-19 21:58:01Z

1

Here's a working example:

You need to clone the object in order to "break" the reference.

var data = [
        {
          "date":1900,
           "data":[
            {"name":"Blackbird","value":0},
            {"name":"Seagull","value":1},
            {"name":"Sparrow","value":0}
          ]
        },
        {
          "date":1910,
          "data":[
            {"name":"Owl","value":1}
          ]
        },
        {
          "date":1920,
          "data":[
            {"name":"Eagle","value":0},
            {"name":"Albatross","value":2}
          ]
        }
    ];

    var incremental = [];
    var dataHistory = null;

    for(i = 0; i < data.length; i++){
      var temp = dataHistory ? dataHistory.slice() : []; //.slice to clone array

      //Replace all values with current date.
      for(var j = 0; j < temp.length; j++){
        temp[j] = JSON.parse(JSON.stringify(temp[j])); //Clone object
        temp[j].date = data[i].date;
      }
      
      //Add current date to object.
      for(var j = 0; j < data[i].data.length; j++){
         var aux = {
           name: data[i].data[j].name,
           value: data[i].data[j].value,
           date: data[i].date
         };
        
         temp.push(aux);
      }
      
      dataHistory = temp;
      incremental.push(temp);
    }

document.body.innerHTML = '<pre>' + JSON.stringify(incremental, null, 4) + '</pre>';

If you're using jQuery you can replace:

temp[j] = JSON.parse(JSON.stringify(temp[j]));

With:

temp[j] = $.extend({}, temp[j]);

edited Jan 19, 2016 at 21:58

answered Jan 19, 2016 at 21:37

Marcos Casagrande

40.7k11 gold badges93 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GuitarExtended Over a year ago

This seems to work, though x should be replaced by data, right ?

GuitarExtended Over a year ago

I have solved my problem using your trick with JSON.parse and JSON.stringify in the code sample I provided (on temp.concat(t) ).

Marcos Casagrande Over a year ago

Glad it helped, It's an easy, cross browser way to clone an object ;)

Peter Janin · Accepted Answer · 2016-01-19 21:23:43Z

0

Try this one:

var data = [
    {"date":1900,"data":[
        {"name":"Blackbird","value":0},
        {"name":"Seagull","value":1},
        {"name":"Sparrow","value":0}
    ]},
    {"date":1910,"data":[
        {"name":"Owl","value":1}
    ]},
    {"date":1920,"data":[
        {"name":"Eagle","value":0},
        {"name":"Albatross","value":2}
    ]}
];

var result = data.map(function(item) {
  var replacement = [];
  for (var key in item.data) {
     var subItem = item.data[key];
     subItem.date = item.date;
     replacement.push(subItem); 
  }
  return replacement;
});

document.body.innerHTML = '<pre>' + JSON.stringify(result, null, 3) + '</pre>';

answered Jan 19, 2016 at 21:23

Peter Janin

11 bronze badge

Comments

adeneo · Accepted Answer · 2016-01-19 22:40:12Z

0

Use map, iterate over the inner array, and set the date property to each object etc.

var data = [
    {"date":1900,"data":[
        {"name":"Blackbird","value":0},
        {"name":"Seagull","value":1},
        {"name":"Sparrow","value":0}
    ]},
    {"date":1910,"data":[
        {"name":"Owl","value":1}
    ]},
    {"date":1920,"data":[
        {"name":"Eagle","value":0},
        {"name":"Albatross","value":2}
    ]}
]

data = data.map(function(obj, i, arr) {
    var o = [];
    
    arr.slice(0, i).forEach(function(item) {
        item.data.forEach(function(data) {
            o.push(Object.assign({}, data))
        });
    });
    
    return o.concat(obj.data.map(function(item) { item.date = obj.date; return item }));
});

document.body.innerHTML = '<pre>' + JSON.stringify(data, null, 4) + '</pre>';

Object.assign with polyfill

edited Jan 19, 2016 at 22:40

answered Jan 19, 2016 at 21:22

adeneo

319k29 gold badges410 silver badges392 bronze badges

2 Comments

GuitarExtended Over a year ago

It adds the date to the objects, but doesn't create an "incremental" array.

adeneo Over a year ago

Oh, you want to add the previous arrays as you go as well. Just map it again and slice and return

Collectives™ on Stack Overflow

Array and object copy in Javascript

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related