将本地javascript变量的值替换为Pug的插值

Question

I am new to pug and now I am trying to render a html view which contains a table whose entries are parsed from app.js

this is my 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}

here is my 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'));

I am not sure how should I do the following trick: inside index.pug I do declare a local js array of three possible values apple , pine and peach , and I am use a for-each loop to iterate over this array. However, in the last line of pug, it seems like that pug doesn't substitute the "column" in #{data[i].column} with apple , pine and peach as the loop is iterating over.

So is there a way to tell pug to replace column in #{data[i].column} with the values of same local js variable that I have declared?

Thanks

Answer 1

Check your local variable value and server side variable value is same using if statement and based on that you can give the value to td of local variable column

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

Use

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]