将本地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]