对分层嵌套数据进行迭代并从中构建html

Question

我在处理JS中的一些数据时感觉有些困难，我从API输出数据。

后端输出的是可以嵌套到第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); 
} 

编辑： 倍感stupud不实现的JavaScript /每个作品（正在写一个python 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> 
) 
}