How to properly return an associative array back to a nunjucks template

Question

Within my gulp nunjucks area, I created a custom filter that generates date & time information for the week. I'm stuck in knowing how to return an associative array back into my nunjucks template and how to reference any of the array values. Below is my setup.

const manageEnvironment = function (environment) {

  environment.addFilter('ServiceDate', function (njDay) {

    //...lots of logic here....

    //...my initial attempt in prepping a return for my data....

    var domDate =  nSunday[1]["mdate"];
    var domMonth = nSunday[1]["mmonth"];
    var domHour =  nSunday[1]["mhour"];
    var domMin =   nSunday[1]["mmin"];
    var domDay =   nSunday[1]["mday"];
    var domMer =   nSunday[1]["mmeridiem"];

    // my OP question - but am I wasting my time in defining the above variables because there is a way to simply return `nSunday[1]` back to my nunjucks template? and us it like this...

    /*
    {{"Sunday"|ServiceDate.mdate}}
    {{"Sunday"|ServiceDate.mmonth}}
    {{"Sunday"|ServiceDate.mhour}}
    {{"Sunday"|ServiceDate.mmin}}
    {{"Sunday"|ServiceDate.mday}}
    {{"Sunday"|ServiceDate.mmeridiem}}
    */

    return {
    //..not sure how...
    }
  });
}

//now generate nunjucks...

function genNunJucks(cb) {
    return src(['src/views/*.html'])
        .pipe(nunjucksRender({
            path: ['src/views/', 'src/views/parts'],
            ext: '.html',
            data: {},
            inheritExtension: false,
            envOptions: {
                watch: true
            },
            manageEnv: manageEnvironment,
            loaders: null
        }))
        .pipe(htmlbeautify({
            indentSize: 2,
            "eol": "\n",
            "indent_level": 0,
            "preserve_newlines": false
        }))
        .pipe(dest('pub'));
    cb();
}

Thanks for any education in the process of learning how to properly return an associative array back to a nunjucks template and accessing any of its values.

Answer 1

My first mistake was determining if I needed to set a filter or a global function to process my logic. After reading the docs, it appears that addGlobal is a better fit for my case.

I then returned my associative array as an object back into my template, which from there I'm able to iterate through. The full code...

from my gulpfile.js file

    //define helper function for nunjucks

    const manageEnvironment = function (env) {

    function npcc_serviceDate(gDay) {

     //...lots of code here to generate the next (gDay) info...      

      return nextEventDate; //return my associative array as an nunjucks object
    }

    env.addGlobal('serviceDate', npcc_serviceDate);

  }

  //generate nunjucks template...

  function genNunJucks(cb) {
    return src(['src/views/*.html'])
        .pipe(nunjucksRender({
            path: ['src/views/', 'src/views/parts'],
            ext: '.html',
            data: {},
            inheritExtension: false,
            envOptions: {
                watch: true
            },
            manageEnv: manageEnvironment,
            loaders: null
        }))
        .pipe(htmlbeautify({
            indentSize: 2,
            "eol": "\n",
            "indent_level": 0,
            "preserve_newlines": false
        }))
        .pipe(dest('pub'));
    cb();
  }

my main.html nunjucks file

I can now access various values of my object and place them anywhere in my template.

  <ul>
   {% for info in serviceDate("Sunday") %}
     <li>{{ info.mday }}</li>         //"Sunday"
     <li>{{ info.mdate }}</li>        //"19"
     <li>{{ info.mmonth }}</li>       //"June"
     <li>{{ info.mhour }}</li>        //"11"
     <li>{{ info.mmin }}</li>         //"30"
     <li>{{ info.mmeridiem }}</li>    //"am"
   {% endfor %}
  </ul>