How import a JSON file with a data object inside in pug template using Grunt as task runner?

Question

I have a JSON file with a object (name/code of font character), I wish import this in a Pug file, I'm using Grunt for task runner.

{
    "brand": 61697,
    "podcast-x": 61698,
    "podcast": 61699,
    "play": 61700,
    "book": 61702,
    "book-x": 61703,
    "map": 61704,
    "search": 61705,
    "map-x": 61706,
    "play-x": 61707,
    "eye": 61708,
    "eye-x": 61709
}

I wish show each character in a list, like:

ul.list.list--inline
  li.list__item
    span.list__icon
      i.i.i--brand

I'm using https://github.com/sapegin/grunt-webfont to generate the fonts. — Bruno Wego, Jun 24 '20 at 21:37

score 1 · Answer 1 · answered Jun 24 '20 at 19:59

First add it to grunt task pug.js

module.exports = {
  options: {
    pretty: true,
    data: {
      require: require
    }
  }
};

Now just include it in the pug file:

block append variables
  - const icons = require('../src/images/icons/.codepoints.json')

block content
  ul.list.list--inline
    each code, name in icons
      unless name.endsWith('-x')
        li.list__item
          span.list__icon
            i.i(class='i--' + name)

            - let x = Object.keys(icons).includes(name + '-x');

            if x
              i.i(class='i--' + name + '-x')

In my case the final result:

How import a JSON file with a data object inside in pug template using Grunt as task runner?

1 Answers1