title: How do I manage multiple nested objects in javascript
body: <p>I have a list of objects from a json object some thing like this:</p>
  
  <pre><code>productData = [
  
  {   
      id: 'unique id',
      a: 'some value',
      b: 'some value',
      c: 'some value',
      offers: [{id: 'id',  a: 'some value', b: 'some value'}, {price: {id: 'id', a:'some value', b: 'some value'}}],
      alterations: [{id: 'id',  a: 'some value', b: 'some value'}, {price: {id: 'id', a:'some value', b: 'some value'}}],
      channels: [{id: 'id', a:'some value', b: 'some value'}],
      terms: [{id: 'id', a:'some value', b: 'some value'}]
  },
  
  {   
      id: 'unique id',
      a: 'some value',
      b: 'some value',
      c: 'some value',
      offers: [{id: 'id',  a: 'some value', b: 'some value'}, {price: {id: 'id', a:'some value', b: 'some value'}}],
      alterations: [{id: 'id',  a: 'some value', b: 'some value'}, {price: {id: 'id', a:'some value', b: 'some value'}}],
      channels: [{id: 'id', a:'some value', b: 'some value'}],
      terms: [{id: 'id', a:'some value', b: 'some value'}]
  },
  
  //so on ......
  
  ];
  </code></pre>
  
  <p>Where I need to either edit, add, remove data from any of the nested objects and send the whole modified object to server. I am finding hard time maintining the objects as all of them are inside one global object/array.</p>
  
  <p>I thought of first creating separate arrays for nested objects looping the global array i.e. 'productData` and create the following:</p>
  
  <ol>
  <li>offers array</li>
  <li>alterations array</li>
  <li>terms array</li>
  <li>channels array</li>
  </ol>
  
  <p>and then pass them to the view and then either update/splice/push to those individual array and merge them back into the global array <code>product</code> and send it to server, but what if I have about 50 global objects? </p>
  
  <p>Then I need to loop through 50 objects and create array of objects?</p>
  
  <p>example:</p>
  
  <pre><code>var termsArray = [];
  var channelsArray = [];
  
  for (var i = 0; i &lt; productData.length; i++) {
  
      for(var j = 0; j &lt; productData[i].termsArr.length; j++){
          termsArray.push(productData[i].termsArr[j])
      }
  
      for(var k = 0; k &lt; productData[i].channelsArr.length; k++){
          channelsArray.push(productData[i].channelsArr[k])
      }
  }
  </code></pre>
  
  <p>Then I can do any modifications on arrays created and finally push them back to the global object?</p>
  
  <p>Need some suggestions in approaching this issue. One other way I can think of is getters and setters, but I am still new to it.</p>