將本地javascript變量的值替換為Pug的插值

Question

我是pug的新手，現在我試圖呈現一個html視圖，其中包含一個表，該表的條目是從app.js中解析的

這是我的index.pug

doctype html
html(lang='en')
    head
        title Pug
    body
        table
            - var columns = ['apple', 'pine', 'peach'];
            tr
                each column in columns
                    th #{column}
            - for (var i = 0; i < 3; i++)
                tr 
                    each column in columns 
                        td #{data[i].column}

這是我的app.js

const express = require('express');
const pug = require('pug')
var app = module.exports = express();

app.set('view engine', 'pug');

var foo = [{
        apple: 1,
        pine: 2,
        peach: 3
    }, {
        apple: 4,
        pine: 5,
        peach: 6
    },
    {
        apple: 7,
        pine: 8,
        peach: 9
    }
];
app.get('/', (req, res) => {
    res.render('index', {
        data: foo
    });
});

app.listen(3000, () => console.log('Listen to port 3000 now'));

我不確定如何執行以下操作：在index.pug我聲明了一個本地js數組，其中包含三個可能的值apple ， pine和peach ，並且我使用了一個for-each循環來對該數組進行迭代。 但是，在哈巴狗的最后一行中，隨着循環的不斷循環，哈巴狗似乎沒有用apple ， pine和peach代替#{data[i].column}的“列”。

那么，有沒有辦法告訴#{data[i].column}用我聲明的相同本地js變量的值替換#{data[i].column} column ？

謝謝

Answer 1

使用if語句檢查您的本地變量值和服務器端變量值是否相同，並基於此值可以將值賦予本地變量column td

table
        - var columns = ['apple', 'pine', 'peach'];
        tr
            each column in columns
                th #{column}
        - for (var i = 0; i < 3; i++)
            tr 
                each column in columns
                    if column == data[i].column
                        td column

Answer 2

采用

html(lang='en')
    head
        title Pug
    body
        table
            - var columns = ['apple', 'pine', 'peach'];
            //- - var columns = Object.keys(data[0]); // Could also use this
            tr
                each column in columns
                    th=column
            - for (var i = 0; i < 3; i++)
                tr 
                    each column in columns
                        td=data[i][column]