时间戳

首页 > 解决方案 > 如何使用 Pugjs 或 Jade 创建表

node.js - 如何使用 Pugjs 或 Jade 创建表

问题描述

我想使用 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”？

我怎样才能解决这个问题？

标签： node.jshtml-tablepug

解决方案

您的问题与您开始each循环的位置有关，但您的 JSON 也存在一些结构性问题。

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

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

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

当您在帐户（对象，而不是数组）上创建循环时，pug 将遍历该对象中的每个属性，因此您的第一个 each ( 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 迭代文档以获取更多参考。

推荐阅读