如何使用 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);

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

当您在帐户（一个对象，而不是数组）上创建循环时，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 iteration docs 以获得更多参考。