title: How to recursively add HTML elements from a JSON object?
body: <p>I have a JSON object of an unknown size, number of keys, and depth level.
  Example:</p>
  <pre><code>{
    &quot;domains&quot;: [
      {
        &quot;url_part&quot;: &quot;domainOne.com&quot;,
        &quot;children&quot;: [
          {
            &quot;url_part&quot;: &quot;one&quot;,
            &quot;children&quot;: [
              {
                &quot;url_part&quot;: &quot;a&quot;,
                &quot;children&quot;: [
                  {
                    &quot;url_part&quot;: &quot;page1&quot;,
                    &quot;children&quot;: []
                  },
                  {
                    &quot;url_part&quot;: &quot;page2&quot;,
                    &quot;children&quot;: []
                  }
                ]
              },
              {
                &quot;url_part&quot;: &quot;b&quot;,
                &quot;children&quot;: []
              },
              {
                &quot;url_part&quot;: &quot;c&quot;,
                &quot;children&quot;: []
              }
            ]
          },
          {
            &quot;url_part&quot;: &quot;two&quot;,
            &quot;children&quot;: [
              {
                &quot;url_part&quot;: &quot;a&quot;,
                &quot;children&quot;: [
                  {
                    &quot;url_part&quot;: &quot;page1&quot;,
                    &quot;children&quot;: []
                  },
                  {
                    &quot;url_part&quot;: &quot;page2&quot;,
                    &quot;children&quot;: []
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        &quot;url_part&quot;: &quot;domainTwo.com&quot;,
        &quot;children&quot;: []
      }
    ]
  }
  </code></pre>
  <p>And I want to have a page initially just have a button for each domain, then when you click each button it expands one layer down:</p>
  <p><strong>domainOne.com</strong></p>
  <p><strong>domainTwo.com</strong></p>
  <p>When you click on <strong>DomainOne.com</strong> turns into:</p>
  <p><strong>domainOne.com</strong></p>
  <p><strong>--one</strong></p>
  <p><strong>--two</strong></p>
  <p><strong>domainTwo.com</strong></p>
  <p>I am able to create a button for each of the domains, but am only able to reach one level down when it comes to making buttons for the children.</p>
  <p>I am passing in:</p>
  <ul>
  <li>the parentJSON (domains[&quot;domainone.com&quot;] in the first call)</li>
  <li>the treelevel (to keep track of indentation)</li>
  <li>the currentURL (for naming and later uses)</li>
  <li>the &quot;aboveDiv&quot;, the div in which all of the children are appended under</li>
  </ul>
  <p>The function that I'm trying to use recursively looks like this:</p>
  <pre><code>function childrenButtons(parentJSON, level, currentURL, aboveDiv){
                  if (parentJSON[&quot;children&quot;] == &quot;[]&quot;) {
                      //if the JSON you are passing in doesnt have children, this is the end
                      console.log(&quot;+++++++++no more kids to show++++++++++++&quot;);
                      return 0;
                  }
                  else {
                   
                      
                      for (let j = 0; j &lt; parentJSON[&quot;children&quot;].length; j++) {
  
                          button.addEventListener(&quot;click&quot;, function () {
                              ////for each child, create their own div
                              const childDivElement = document.createElement(&quot;div&quot;);
                              const domainDivElementID = &quot;childDivElement&quot; + j;
                              childDivElement.setAttribute(&quot;id&quot;, domainDivElementID);
                              aboveDiv.append(childDivElement);
  
                              //create and add button with name = full path of button
                              const button = document.createElement(&quot;button&quot;);
                              const currChild = domains[i][&quot;children&quot;][j][&quot;url_part&quot;];
                              fullURL = currentURL + &quot;/&quot; + currChild;
                              button.innerHTML = fullURL;
                              button.style.marginLeft = level*20;
                              childDivElement.append(button);
  
                              let newParentJSON = parentJSON[&quot;children&quot;][j]
                              console.log(parentJSON[&quot;children&quot;][j]);
  
                              treeLevel++;
                              return childrenButtons(newParentJSON, treeLevel, fullURL, childDivElement);
  
                          }, false);
                      }
                  }
              }
  </code></pre>