title: Dynamically created nested array in javascript
body: <p>I need to dynamically create a nested array in javascript. The array needs to have this structure. </p>
  
  <pre><code>{
    "name": "main",
    "children": [
      {
        "name": "main_topic_1",
        "children": [
          {
            "name": "sub_topic",
            "size": 422
          },
          {
            "name": "sub_topic",
            "size": 422
          }
        ]
      },
      {
        "name": "main_topic_2",
        "children": [
          {
            "name": "sub_topic",
            "size": 422
          },
          {
            "name": "sub_topic",
            "size": 422
          }
        ]
      },
      {
        "name": "main_topic_3",
        "children": [
          {
            "name": "sub_topic",
            "size": 422
          },
          {
            "name": "sub_topic",
            "size": 422
          }
        ]
      }
    ]
  }
  </code></pre>
  
  <p>I need to be able to dynamically choose the number of "main_topic_x" as well as the number of sub_topics that belong to those respective main_topics. </p>
  
  <p>I am trying something like this, but I don't know how to get the structure as above. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>main_topics = ['topic 1','topic 2','topic 3'];
      sub_topics = ['subtopic 1','subtopic 2'];
  
      var a = new Array();
      var b = new Array();
  
      for(l=0; l&lt;main_topics.length; l++){
        a[l] = b;
        for(j=0; j&lt;sub_topics.length; j++){
          b[l] = sub_topics[j];
        }
      }
    
      console.log(JSON.stringify(a, null, 2));</code></pre>
  </div>
  </div>
  </p>