How can you pass JSON data into a Nunjucks file?

Question

I have a .njk file that I would like to populate with data from a JSON file.

Currently I am using Webpack.

Here is my JSON File:

{
    "ranking": "Colors",
    "description": "Here is a ranking of my favorite colors",
    "rankings": [
        {
            "rank": 1,
            "institution": "red",
        },
        {
            "rank": 2,
            "institution": "Blue",
        },
        {
            "rank": 3,
            "institution": "Green",
        }
    ]
}

In my nunjucks file, what would be the syntax I would need to use to pass in this data?

This has already been answered in http://stackoverflow.com/questions/31780560/how-can-i-pass-json-data-into-a-nunjucks-template — Timo Ernst, Feb 14 '17 at 12:35
As an alternative, you can also use npm nunjucks-includeData: https://www.npmjs.com/package/nunjucks-includeData — Timo Ernst, Feb 14 '17 at 12:39

score 2 · Answer 1 · answered May 11 '17 at 15:10

The code which worked for me:

var json1 = require('./data/data-1.json');

const SolutionTemplate = require('./solution.njk');

let toggleSolutionFunc = function() {
      if (document.getElementById('solution-content') != null) {
        document.getElementById('solution-content').innerHTML = SolutionTemplate.render(json1);

How can you pass JSON data into a Nunjucks file?

1 Answers1