如何使用 Pugjs 或 Jade 创建表格

Question

我想使用 Pug 将这个 json 文件渲染到表中，但它并没有按照我想要的方式发生。我想要两种语言和 app_adi 的数据，但只有最新的数据。我怎样才能同时显示两者？

JSON 文件

{
   "accounts":{
         "user":{
            "_id":"5a500vlflg0aslf011ld0a25a5",
            "username":"john",
            "id":"59d25992988fsaj19fe31d7",
            "name":"Test",
            "customer":" John Carew",
         },
         "application":[
            {
               "app_id":"5af56pi314-y1i96kdnqs871nih35",
               "language":"es"
            },
            {
               "app_id":"5af56pi314-blvinpgn4c95ywyt8j",
               "language":"en"
            }
         ]
      }
   }

代码

 body
  main
    .container              
     table.table
        tr
          th username
          th customer
          th language
          th app_id
      tbody
        each users in accounts
          tr
            td #{users.user.name}
            td #{users.user.email}
            each app in application
                td #{app.language}
                td #{app.app_id}

我想建这个表：

username customer    language  app_di
john     John Carew   es        5af56pi314-y1i96kdnqs871nih35
                      en        5af56pi314-blvinpgn4c95ywyt8j

但是当我运行上面的代码时，我只得到最后一个，只有语言“en”？

我该如何解决这个问题？

Answer 1

您的问题与您开始

each

循环的位置有关，但 JSON 也存在一些结构问题。

我假设您将对象传递到您的路线中，如下所示：

var data = { "accounts": ... }
res.render('templatename', data);

这意味着在渲染时，accounts 对象将位于 pug 模板的根目录下。

当您在帐户（对象，而不是数组）上创建循环时，哈巴狗将迭代该对象中的每个属性，因此您的第一个每个（

each users in accounts

）将为您提供

users

变量中的这两个值：

1. 用户
2. 申请

我认为这不是你想要的。如果您将

accounts.user

段转换为数组，您可以成功地循环访问一组用户，如下所示：

each user in accounts.users

对于第二个，您需要参考以下申请：

each application in accounts.application

---

或者，您可以将数据传递到渲染函数中，如下所示：

var data = { "accounts": ... }
res.render('templatename', data.accounts);

如果你这样做，那么你将像这样循环访问用户：

each user in users

应用程序循环将是这样的：

each application in applications

---

请快速查看 pug 迭代文档以获取更多参考。