Get iteration variable from js file

Question

I have to loop over Array of objects consist of [{ title: '', desc: '', svg: '' }, ...] . As SVG code is too large and I don't want to clutter my .pug file with lots of SVG codes.

Is there anything by which I can import this Array from another JS file and just use it without outputting/generating array in it to compiled html just like a normal inlie JS in PUG:

someMagicImport data.js

each feature in data.features
  li= feature.title

data file: data.js

const features = [
 { title: '...', desc: '...', svg: '...' },
 // .... other objects
]

So, the simple question is how can I use the above features array defined in data.js and use it in my .pug file for iteration.

Regards.

Update 1: More detailed question. Update 2: I am not using any backend framework like expressJS or Django. I am just generating HTML markup from PUG.

Answer 1

Now knowing that you're just using PugJS, you can approach it this way. Create a new pug file with an unbuffered code block , declare a variable with your data object, and then include that file wherever you need it.

features.pug

-
  const features = [
    { title: '...', desc: '...', svg: '...' },
    // .... other objects
  ]

index.pug (now you can access the features object)

include features

ul 
  each feature in features
    li= feature.title