Javascript Copy Object in chain style
<p>I have a declared an Object something like below:</p>

<pre><code>var seriesOptions = {
y: 99
};
</code></pre>

<p>In my code I keep creating adding new objects and add as a property to seriesOptions object :</p>

<pre><code>drilldown = {
x: [90,20,40]
}
categories = {
z: [20,30,40.50]
}
values = {
p:[30,50,60]
}
</code></pre>

<p>Then:</p>

<pre><code>seriesOptions['drilldown'] = drilldown
seriesOptions.drilldown['categories'] = categories;
seriesOptions.drilldown['values'] = values;
</code></pre>

<p>where drilldown, categories and values are another object </p>

<p>Now I have to copy try to copy seriesOptions object into another array <strong>seriesOpts</strong> like in a chain format </p>

<pre><code>if(seriesOpts.length == 0)
     seriesOpts.push(seriesOptions);
else
     seriesOpts[seriesOpts.length - 1].drilldown = $.extend(true, {}, seriesOptions);
</code></pre>

<p>meaning that the new seriesOptions would be chained under last seriesOptions.drilldown object. </p>

<p>My issue is that I am not able to see the seriesOptions.y value in </p>

<blockquote>
  <p>seriesOpts[seriesOpts.length - 1].drilldown</p>
</blockquote>

<p>object? I am expecting something like below:</p>

<blockquote>
  <p>seriesOpts[x].y : 99</p>
  
  <p>seriesOpts[x].drilldown.y : 99</p>
</blockquote>

<p>Please let me know what wrong I am doing in my code?</p>

<p>Note I am using $.extend to copy the object to new one. So how can I retain both old and new values like :  seriesOpts[x].y and seriesOpts[x].drilldown.y are accessible?</p>

<p>Thanks in advance.</p>
