How do I use the external variables from external javascript file into index.pug?

Question

Suppose, I have an external javascript file named myscript.js . It declares a variable named headArr which is an array.

 headArr = [`id`,`firstname`,`lastname`,`company`,`salary`];

In the index.pug , I have an include:

script
        include ../public/script/myscript.js

And I use an each iteration to read each member of the array.

ul
  each val in headArr
    li= val

It returns/shows error that it can't read headArr.length return undefined

Answer 1

Then perhaps including your script server-side is an option for you?

// myscript.js
export const headArr = [`id`,`firstname`,`lastname`,`company`,`salary`];

// Where you do your rendering
import { headArr } from myscript.js
...
await ctx.render(index, { headArr }); 

Pug allows you to pass in variables as the second argument, which will be bound to window when rendered { test: "something" } becomes window.test . (ctx.render is just executing the compiledTemplate-function pug has generated);

Answer 2

I can find the solution. Thank@ippi In koa.js, you can use require only.

For my case: In your script add

const head = [`id`,`firstname`,`lastname`,`company`,`salary`];

module.exports.head = head;

Then, index.js add

const myScript = require('./public/script/myscript');

Then render the page

router.get(`/`, async ctx => {
    await ctx.render(`index`,myScript)
});

Finally, add the Each iteration to your index.pug file

            tr
            each i in head
                th= i

Answer 3

router.get(/, async ctx => 
    { await ctx.render ('index', { headArr: headArr} ) 
    });

In your myscript.js file, you can use this code while rendering index.pub. Because pug file takes object as a input and you need to pass headArr in that object.