翻译“扁平”列表中嵌套的HTML无序列表

Question

我有一个项目清单，在Django模板的工作。每个项目都有一个名称和一个类别。该类别可以用斜线分隔以创建子类别。我需要把平面列表到嵌套无序的HTML列表。做这个的最好方式是什么？修改与Python数据结构Django的观点是一种选择，但我宁愿Django模板渲染内做到这一点。 JavaScript也是解决这个问题的一个选项。

列表保证，因为我的方式查询从数据库中的项目被正确排序。

例如，假设Python的结构：

[ 
    { category: 'Food/Fruits', name: 'Apple' }, 
    { category: 'Food/Fruits', name: 'Banana' }, 
    { category: 'Food/Fruits', name: 'Coconut' }, 
    { category: 'Food/Meats', name: 'Steak' }, 
    { category: 'Food/Meats', name: 'Chicken' }, 
    { category: 'Furniture', name: 'Chair' }, 
] 

我想创建嵌套列表这些项目。这将变成：

<label>Food</label> 
<ul> 
    <li> 
     <label>Fruits 
     <ul> 
      <li>Apple</li> 
      <li>Banana</li> 
      <li>Coconut</li> 
     </ul> 
     </label> 
    </li> 
    <li> 
     <label>Meats 
     <ul> 
      <li>Steak</li> 
      <li>Chicken</li> 
     </ul> 
     </label> 
    </li> 
</ul> 
</label> 
<label>Furniture</label> 
<ul> 
    <li>Chair</li> 
</ul> 
</label> 

渲染的结果是这样的：

食品

• 水果
  • 苹果
  • 香蕉
  • 椰子
• 肉类
  • 牛排
  • 鸡

家具

• 主席

Answer 1

使用regroup标签：

<label>Food</label> 
{% regroup foods by category as category_list %} 
<ul> 
{% for category in category_list %} 
    <li> 
     <label>{{ category.grouper }}</label> 
     <ul> 
     {% for food in category.list %} 
      <li>{{ food.name }}</li> 
     {% endfor %} 
     </ul> 
    </li> 
{% endfor %} 
</ul>