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

Question

我正在尝试像这张图片一样呈现一个 HTML 表格（带有玉石）：

数据格式如下：

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，以便更容易循环...用下面的代码做，你会遇到问题当您点击未定义项目的 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= ""