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?

Answer 1

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);