在 EJS 中查找两个数组之间的匹配项

Question

我正在使用 node、express、knex、postgres、EJS 和 bootstrap。我有一个 table，deckorderfil，它有一个主键列 ordnbr。我的另一个 table，decktowfil，有一个引用 deckorderfil 的 ordnbr 外键。

我运行遇到的问题是我似乎无法让 EJS 只打印那些与 deckorderfil 匹配的 decktowfil 结果。

通过执行以下操作，我已经成功地弄清楚了如何在向 url 发出 GET 请求后显示两个结果：

我的index.js路线：

router.get('/dashboard', authMiddleware.ensureLoggedIn, function(req, res) {
  Tow.getTows().then(tows => {
    Job.getJobs().then(jobs => {
    jobs = JSON.parse(JSON.stringify(jobs)); //deckorderfil table
    tows = JSON.parse(JSON.stringify(tows)); //decktowfil table
    res.render('dashboard', { title: 'Express', jobs: jobs, tows: tows });
  });
    });
});

我的dashboard.ejs:

<% for (let i = 0; i < jobs.length; i++) { %> <!-- deckorderfil (primary key) table -->
  <%= jobs[i].ordnbr %>
  <% } %>

<% for (let j = 0; j < tows.length; j++) { %> <!-- decktowfil (foreign key) table -->
    <%= tows[j].ordnbr %>

  <% } %>

dashboard.ejs 打印以下内容：

D1 D2 D3 (the jobs ordnbr's) D1 D1 D2 (the tows ordnbr's)

我的问题是，如何创建一个 IF 语句来表示 "if the job ordnbr is D1, only return the tows ordnbr's that also equal D1, and create divs for each of these"？

我已经成功地循环我的 EJS 以生成显示每个 deckorderfil ID 及其其他变量的 div。我正在尝试将匹配的 decktowfil 记录嵌入到这些 div 中作为它们自己的单独 div。这是我要完成的工作的图片。

我应该通过 Knex、EJS 还是 jquery/javascript 来完成此操作？如果是这样，地点和时间？到目前为止，我已经尝试将我的 HTML 中的父元素的 ID 设置为 deckorderfil ordnbr，然后将我的 EJS 查询与之匹配，但它没有奏效。

谢谢，如果您还需要其他任何内容来回答问题，请告诉我。

Answer 1

在不知道对象的确切形状的情况下，这里有一种可行的实现方法：

快递应用

const jobs = [
  {
    orderNum: 'D1'
  },
  {
    orderNum: 'D2'
  },
  {
    orderNum: 'D3'
  },
];

const tows = [
  {
    orderNum: 'D1',
    orders: [
      1,
      2,
      3,
    ],
  },
  {
    orderNum: 'D2',
    orders: [
      1,
      2,
      3,
    ],
  },
  {
    orderNum: 'D3',
    orders: [
      1,
      2,
      3,
    ],
  },
];

app.get('/', (req, res, next) => {
  res.render('index', { jobs, tows });
});

Index.ejs*

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .outer {
        border: 1px solid red;
        padding: 18px;
        margin: 12px;
      }
      .inner {
        margin: 12px;
        padding: 12px;
        border: 1px solid green;
      }
    </style>
  </head>
  <body>

    <% for (let i = 0; i < jobs.length; i++) { %>
      <div class="outer">      
        <p>Jobs<%= jobs[i].orderNum %></p>
          <% tows.find(tow => tow.orderNum === jobs[i].orderNum).orders.forEach(order => { %>
          <div class="inner">

            <p>Tows: id <%= order %></p>

          </div>
          <% }); %>
      </div>
    <% } %>
  </body>
</html>

结果：

Answer 2

好的，我让它工作了。这一切都是为了弄清楚如何嵌套 for 循环并使 div 正确。

以下是我构建 EJS 以获得正确输出的方式。我不需要使用 .find() 运算符。

<% for (let i = 0; i < jobs.length; i++) { %>
    <div class="outer">
    <p>Jobs <%= jobs[i].ordnbr %></p>
    <% for (let j = 0; j < tows.length; j++) { %>
        <% if (tows[j].ordnbr === jobs[i].ordnbr) { %>
            <div class="inner">
                <p>Tow: <%= tows[j].tow_id %></p>
            </div>
        <% } %>
        <% } %>
    </div>
    <% } %>

感谢丹尼尔的帮助。你激发了我的聪明才智。

在 EJS 中查找两个数组之间的匹配项

Find matches between two arrays in EJS

express

ejs

knex.js