循环遍历javascript数组以使用jade构建HTML表

Question

我正在尝试渲染一个HTML表格（带有jade），如下图所示：

数据格式如下：

var menus = [
    {
        day: "Lundi",
        items: [
            { name: "item 1", price: 6.50 },
            { name: "item 2", price: 7 },
            { name: "item 3", price: 6.50 }
        ]
    },
    {
        day: "Mardi",
        items: [
            { name: "item 1", price: 6.5 },
            { name: "item 2", price: 7 }
        ]
    },
    {
        day: "Mercredi",
        items: [
            { name: "item 1", price: 6.5 },
            { name: "item 2", price: 7 },
            { name: "item 3", price: 6.5 }
        ]
    },
    {
        day: "Jeudi",
        items: [
            { name: "item 1", price: 6.5 },
            { name: "item 2", price: 7 },
            { name: "item 3", price: 6.5 }
        ]
    },
    {
        day: "Vendredi",
        items: [
            { name: "item 1", price: 6.5 },
            { name: "item 2", price: 7 }
        ]
    }
];

以下是我现在所拥有的：

    table
    thead
        tr
            each menu in menus
                th= menu.day
    tbody
        // what kind of magic loop should I use here to go through menus' items ?

所以，正如你所看到的，我正在努力遍历每个菜单的项目。 我是否需要以另一种方式格式化menus数组？

Answer 1

您可以像下面的代码那样执行此操作，或者您可以在将json传递给模板之前格式化路径中的json以使其更容易循环...使用下面的代码执行此操作会遇到问题当你点击未定义项目的td时，你需要进行错误检查以确保有一个菜单项。

    thead
            tr
                each menu in menus
                    th= menu.day
            tbody
                tr
                    each menu in menus
                        td= menu.items[0].name 
                tr
                    each menu in menus
                        td= menu.items[1].name 
                tr
                    each menu in menus
                        if (menu.items[2])
                            td= menu.items[2].name
                        else 
                            td= ""