Question

According to the docs, jQuery.extend() is a solution to execute both a deep and shallow copy of a JSON object. However, when I use this, I get an undefined object error.

My ajax request function and handler:

var tourData;

$.ajax({
  type: "GET",
  url: "includes/phpscripts.php?action=stops",
  dataType: "json", 
  success: (function(data){
    if (data == 'false')
      console.log("Can't load initial panorama");
    else 
      processOptions(data);

  })
});

function processOptions(data){
  tourData = jQuery.extend(true, {}, data);
  console.log(data.length);
  console.log(tourData.length);

}

In Firebug, data.length returns 6, which is what I expected. However, tourData returns undefined. This occurs with and without true as a parameter for a deep copy

I’m going to need the data from this request avaliable to several functions later on, and those functions will be out of scope. As such, I’d like to have a clone of the response avaliable.

The contents of data are

[
  {"fileName":"..\/panos\/photos\/1-prefix_blended_fused.jpg","name":"Start","lat":"43.682211","lon":"-70.450705","heading":"250","width":"1808","height":"653"},
  {"fileName":"..\/panos\/photos\/2-prefix_blended_fused.jpg","name":"Second","lat":"43.6822","lon":"-70.450769","heading":"250","width":"1600","height":"578"},
  {"fileName":"..\/panos\/photos\/2-prefix_blended_fused.jpg","name":"Second","lat":"43.6822","lon":"-70.450769","heading":"250","width":"1600","height":"578"},
  {"fileName":"..\/panos\/photos\/3-prefix_blended_fused.jpg","name":"Third Stop","lat":"43.682219","lon":"-70.450828","heading":"250","width":"1821","height":"627"},
  {"fileName":"..\/panos\/photos\/4-prefix_blended_fused.jpg","name":"Fourth Stop","lat":"43.68218","lon":"-70.450887","heading":"250","width":"1600","height":"800"},
  {"fileName":"..\/panos\/photos\/5-prefix_blended_fused.jpg","name":"Last Stop","lat":"43.682165","lon":"-70.450933","heading":"250","width":"1808","height":"673"}
]

Answer 1

You say data.length is 6. This makes me think that data is an array, not an object.

data is not an object, it’s an array.

$.extend will work with arrays, but the length property will no longer exist, as it converts it to an object.

var data = [{a:12}, {a:13}, {a:14}];
console.log(data.length); // 3
data = $.extend(true, {}, data);
console.log(data); // {0:{a:12}, 1:{a:13}, 2:{a:14}}
console.log(data.length); // undefined