Итерация по иерархическим вложенным данным и построение html из него

Question

Я немного мысленно застреваю в обработке некоторых данных в JS с тем, что я выводил из своего API.

Что выводит backend - это список категорий, который может быть вложен в N-й уровень.

То, что я пытаюсь сделать, это генерировать хорошую вложенную структуру для них, так что они представляют собой структуру JSON, но в DOM:

<div> 
    Women's Fashion 
    <div> 
     Women's Clothes 
     <div>Dresses</div> 
     <div>Watches</div> 
     <div>Etc.</div> 
    </div> 
    <div> 
     Watches 
    </div> 
    <div> 
     Jewellery 
     <div>Swarowski</div> 
     <div>Other</div> 
    </div> 
</div> 

Что такое хороший способ для меня, чтобы достичь этой структуры?

Вот пример данных, которые я выводил. Ключевым моментом здесь является то, что каждая категория может иметь M-число подкатегорий, а конечная глубина фактически не ограничена.

{ 
    "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": [] 
       } 
      ] 
     } 
    ] 
} 

Я думаю, что мне нужно сделать здесь, объявить функцию, которая проходит через ярус и возвращает все. Как

process_category(category) 
{ 
    let html = []; 
    for(var i = 0; i < category.length; i++) 
    { 
     let nested_html = null; 
     if(i.subcategories.length > 0) 
     { 
      nested_html = process_category(i.subcategories); 
     } 
     let new_html = [ 
      <ListItem 
        primaryText={i.name} 
        onTouchTap={this.click_category.bind(this, i.id)} 
        nestedItems={[nested_html]} 
      /> 
     ]; 
     html = [...html, ...new_html]; 
    } 
    return(html); 
} 

EDIT: Чувство невероятно stupud для не понимая, как Javascript для/каждый работает (пишет питона for x in categories: print x.name)

Фиксированный код, который работает, но я не уверен, является оптимальным:

process_category(category) 
{ 
    let html = []; 
    for(var i in category) 
    { 
     let nested_html = null; 
     if(category[i].subcategories.length > 0) 
     { 
      nested_html = this.process_category(category[i].subcategories); 
     } 
     let new_html = [ 
      <ListItem 
        primaryText={category[i].name} 
        // onTouchTap={this.click_category.bind(this, category[i].id)} 
        nestedItems={nested_html} 
      /> 
     ]; 
     html = [...html, ...new_html]; 
    } 
    return(html); 
} 

Answer 1

Я бы рекомендовал рекурсии:

function generateDom(obj) { 
    var node = document.createElement("div"); 
    var textnode = document.createTextNode(obj.name); 
    node.appendChild(textnode);   
    for (var i in obj.subcategories) { 
    var subcategory = obj.subcategories[i]; 
    node.append(generateDom(subcategory)); 
    } 
    return node; 
} 

Рабочий пример: https://jsfiddle.net/mspinks/fdk2m2ua/

Answer 2

Вот на основе скрипку reactjs, который может получить вас в правильном направлении: https://jsfiddle.net/giladaya/yo4xa3z1/4/

Главное, что следует отметить, является использование рекурсивной компонента:

const Item = function(props) { 
    let { data } = props 
    let children 
    if (data.subcategories.length > 0) { 
    children = (
     <div className={`level-${props.level}`}> 
     {data.subcategories.map((item, idx) => 
      <Item data={item} level={props.level+1} key={`item-${idx}`}/> 
     )} 
     </div> 
    ) 
    } else { 
    children = null 
    } 
    return (
    <div> 
     {data.name} 
     {children} 
    </div> 
) 
}