title: Iterating over hierachical nested data and building html from it
body: <p>I'm a bit mentally stuck in processing some data in JS with that I'm outputting from my API.</p>
  
  <p>What the backend is outputing is a category list that can be nested up to N-th level.</p>
  
  <p>What I'm trying to do is generate a nice nested structure for them so that they represent the JSON structure but in the DOM:</p>
  
  <pre><code>&lt;div&gt;
      Women's Fashion
      &lt;div&gt;
          Women's Clothes
          &lt;div&gt;Dresses&lt;/div&gt;
          &lt;div&gt;Watches&lt;/div&gt;
          &lt;div&gt;Etc.&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          Watches
      &lt;/div&gt;
      &lt;div&gt;
          Jewellery
          &lt;div&gt;Swarowski&lt;/div&gt;
          &lt;div&gt;Other&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What's a good way for me to achieve this structure?</p>
  
  <p>Here is a sample of the data I'm outputing. The key stuff here is that each Category can have a M-number of subcategories and the end-depth is not actually limited.</p>
  
  <pre><code>{
      "results": [
          {
              "id": 1,
              "name": "Women's Fashion",
              "hashtag": "#womensfashion",
              "parent_id": null,
              "parents_list": [],
              "product_count": 9466,
              "subcategories": [
                  {
                      "id": 2,
                      "name": "Womens Clothes",
                      "hashtag": "#womensclothes",
                      "parent_id": 1,
                      "parents_list": [
                          1
                      ],
                      "product_count": 2940,
                      "subcategories": [
                          {
                              "id": 3,
                              "name": "Dresses",
                              "hashtag": "#dresses",
                              "parent_id": 2,
                              "parents_list": [
                                  2,
                                  1
                              ],
                              "product_count": null,
                              "subcategories": []
                          },
                          {
                              "id": 4,
                              "name": "Tops",
                              "hashtag": "#womenstops",
                              "parent_id": 2,
                              "parents_list": [
                                  2,
                                  1
                              ],
                              "product_count": null,
                              "subcategories": []
                          },
                          {
                              "id": 5,
                              "name": "Outwear",
                              "hashtag": "#womensoutwear",
                              "parent_id": 2,
                              "parents_list": [
                                  2,
                                  1
                              ],
                              "product_count": null,
                              "subcategories": []
                          },
                          {
                              "id": 6,
                              "name": "Shirts",
                              "hashtag": "#womensshirts",
                              "parent_id": 2,
                              "parents_list": [
                                  2,
                                  1
                              ],
                              "product_count": null,
                              "subcategories": []
                          },
                          {
                              "id": 7,
                              "name": "Pants and Shorts",
                              "hashtag": "#womenspantsandshorts",
                              "parent_id": 2,
                              "parents_list": [
                                  2,
                                  1
                              ],
                              "product_count": null,
                              "subcategories": []
                          },
                          {
                              "id": 8,
                              "name": "Skirts",
                              "hashtag": "#skirts",
                              "parent_id": 2,
                              "parents_list": [
                                  2,
                                  1
                              ],
                              "product_count": null,
                              "subcategories": []
                          },
                          {
                              "id": 9,
                              "name": "Jeans",
                              "hashtag": "#womensjeans",
                              "parent_id": 2,
                              "parents_list": [
                                  2,
                                  1
                              ],
                              "product_count": null,
                              "subcategories": []
                          },
                          {
                              "id": 10,
                              "name": "Lingerie and Nightweare",
                              "hashtag": "#lingerieandnightweare",
                              "parent_id": 2,
                              "parents_list": [
                                  2,
                                  1
                              ],
                              "product_count": null,
                              "subcategories": []
                          },
                          {
                              "id": 12,
                              "name": "Muslimawear",
                              "hashtag": "#womensmuslimawear",
                              "parent_id": 2,
                              "parents_list": [
                                  2,
                                  1
                              ],
                              "product_count": null,
                              "subcategories": []
                          },
                          {
                              "id": 109,
                              "name": "Other Womensclothes",
                              "hashtag": "#otherwomensclothes",
                              "parent_id": 2,
                              "parents_list": [
                                  2,
                                  1
                              ],
                              "product_count": null,
                              "subcategories": []
                          },
                          {
                              "id": 135,
                              "name": "Sweaters and Jackets",
                              "hashtag": "#womenssweatersandjackets",
                              "parent_id": 2,
                              "parents_list": [
                                  2,
                                  1
                              ],
                              "product_count": null,
                              "subcategories": []
                          }
                      ]
                  },
                  {
                      "id": 15,
                      "name": "Bags, Purses and Wallets",
                      "hashtag": "#womensbags",
                      "parent_id": 1,
                      "parents_list": [
                          1
                      ],
                      "product_count": 1626,
                      "subcategories": []
                  },
                  {
                      "id": 16,
                      "name": "Shoes",
                      "hashtag": "#womensshoes",
                      "parent_id": 1,
                      "parents_list": [
                          1
                      ],
                      "product_count": 811,
                      "subcategories": []
                  },
                  {
                      "id": 19,
                      "name": "Watches",
                      "hashtag": "#womenswatches",
                      "parent_id": 1,
                      "parents_list": [
                          1
                      ],
                      "product_count": 513,
                      "subcategories": []
                  },
                  {
                      "id": 17,
                      "name": "Eyewear",
                      "hashtag": "#womenseyewear",
                      "parent_id": 1,
                      "parents_list": [
                          1
                      ],
                      "product_count": 145,
                      "subcategories": []
                  },
                  {
                      "id": 18,
                      "name": "Jewellery",
                      "hashtag": "#womensjewellery",
                      "parent_id": 1,
                      "parents_list": [
                          1
                      ],
                      "product_count": 289,
                      "subcategories": []
                  },
                  {
                      "id": 110,
                      "name": "Other Womensfashion",
                      "hashtag": "#otherwomensfashion",
                      "parent_id": 1,
                      "parents_list": [
                          1
                      ],
                      "product_count": 129,
                      "subcategories": []
                  }
              ]
          }
      ]
  }
  </code></pre>
  
  <p>What I'm thinking I need to do here is declare a function which goes over a tier and returns everything. Like</p>
  
  <pre><code>process_category(category)
  {
      let html = [];
      for(var i = 0; i &lt; category.length; i++)
      {
          let nested_html = null;
          if(i.subcategories.length &gt; 0)
          {
              nested_html = process_category(i.subcategories);
          }
          let new_html = [
              &lt;ListItem
                      primaryText={i.name}
                      onTouchTap={this.click_category.bind(this, i.id)}
                      nestedItems={[nested_html]}
              /&gt;
          ];
          html = [...html, ...new_html];
      }
      return(html);
  }
  </code></pre>
  
  <p>EDIT:
  Feeling incredibly stupud for not realizing how Javascript for/each works (was writing a python <code>for x in categories: print x.name</code>)</p>
  
  <p>The fixed code which works but I'm not sure is optimal:</p>
  
  <pre><code>process_category(category)
  {
      let html = [];
      for(var i in category)
      {
          let nested_html = null;
          if(category[i].subcategories.length &gt; 0)
          {
              nested_html = this.process_category(category[i].subcategories);
          }
          let new_html = [
              &lt;ListItem
                      primaryText={category[i].name}
                      // onTouchTap={this.click_category.bind(this, category[i].id)}
                      nestedItems={nested_html}
              /&gt;
          ];
          html = [...html, ...new_html];
      }
      return(html);
  }
  </code></pre>