将“平面”列表转换为嵌套的 HTML 无序列表

Question

我有一个在 Django 模板中使用的项目列表。每个项目都有一个名称和一个类别。类别可以用斜线分隔以创建子类别。我需要将平面列表转换为嵌套的无序列 HTML 列表。做这个的最好方式是什么？在 Django 视图中使用 Python 修改数据结构是一种选择，但我更愿意在 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>