Javascript 翻译一句；“平坦”；列表到嵌套的HTML无序列表

我有一个在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>

食物


水果

苹果
香蕉
椰子



肉类

牛排
鸡



家具

椅子

渲染结果如下所示：

食物

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

家具

• 椅子

使用标签：

食物
{%按类别将食品重新组合为类别列表%}

{类别列表%中的类别的百分比}

{{category.grouper}}

{category.list%中食品的百分比}
{{food.name}
{%endfor%}


{%endfor%}

是的，这正是重组的使用案例。

<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>