node loop files and push to array to display on screen with nunjucks

Node Loop Files and Push to Array to Display on Screen with Nunjucks#

Introduction#

When working with Node.js, it is common to work with files and arrays. In this guide, we will explore how to loop through files in a directory, push them into an array, and display them on the screen using Nunjucks.

Step 1: Import Packages#

The first step is to import the necessary packages - fs, which is a built-in package for reading files and nunjucks for rendering templates. Here's how:

const fs = require('fs');
const nunjucks = require('nunjucks');

Step 2: Read Files from Directory#

The next step is to read the files from a directory. We can do this using the fs.readdir function. Here's how:

const files = fs.readdirSync('path/to/directory');

The 'path/to/directory' should be replaced with the actual path to the directory you want to read.

Step 3: Loop through Files and Push to Array#

Once we have the files in an array, we can loop through them and push them into another array. Here's how:

const fileArray = [];
for (const file of files) {
  const content = fs.readFileSync(`path/to/directory/${file}`);
  fileArray.push(content);
}

The 'path/to/directory' should be replaced with the actual path to the directory you want to read.

Step 4: Render Template with Nunjucks#

Now that we have the files in an array, we can render a template using Nunjucks. Here's how:

const template = fs.readFileSync('path/to/template.njk', 'utf8');
const renderedTemplate = nunjucks.renderString(template, { files: fileArray });

The 'path/to/template.njk' should be replaced with the actual path to the Nunjucks template you want to use. The { files: fileArray } is the context object that is passed to the template.

Step 5: Display Result on the Screen#

Finally, we can display the result on the screen. Here's how:

const resultDiv = document.getElementById('result');
resultDiv.innerHTML = renderedTemplate;

The 'result' should be replaced with the ID of the HTML div element where you want to display the result.

Alternative Approach#

An alternative approach to Step 3 is to use the fs.readdirSync function with the map function. Here's how:

const fileArray = fs.readdirSync('path/to/directory')
  .map(file => fs.readFileSync(`path/to/directory/${file}`));

This approach reads the files from the directory, maps them to an array of file contents, and returns the array in one line of code.

Conclusion#

In this guide, we explored how to loop through files in a directory, push them into an array, and display them on the screen using Nunjucks. We also looked at an alternative approach to looping through the files. This is a useful technique when working with Node.js and Nunjucks templates.