How to take data from .json file and iterate it in Jade?

Question

JSON

In general, there is an array of data:

data.json

{
  "navigationData": [
    {
      "name": "Link for display",
      "url": "http://google.com"
    },
    {
      "name": "Looooong long items for test long plain text",
      "url": "http://google.com"
    },
    {
      "name": "Link for display",
      "url": "http://google.com"
    },
    {
      "name": "Looooong long items for test long plain text",
      "url": "http://google.com"
    },
    {
      "name": "Link for display",
      "url": "http://google.com"
    },
    {
      "name": "Looooong long items for test long plain text",
      "url": "http://google.com"
    },
    {
      "name": "Link for display",
      "url": "http://google.com"
    },
    {
      "name": "Looooong long items for test long plain text",
      "url": "http://google.com"
    },
    {
      "name": "Link for display",
      "url": "http://google.com"
    },
    {
      "name": "Looooong long items for test long plain text",
      "url": "http://google.com"
    },
    {
      "name": "Link for display",
      "url": "http://google.com"
    },
    {
      "name": "Looooong long items for test long plain text",
      "url": "http://google.com"
    },
    {
      "name": "Link for display",
      "url": "http://google.com"
    },
    {
      "name": "Looooong long items for test long plain text",
      "url": "http://google.com"
    },
    {
      "name": "Link for display",
      "url": "http://google.com"
    },
    {
      "name": "Looooong long items for test long plain text",
      "url": "http://google.com"
    }
  ]
}

Building the project with gulp:

gulpfile.js

let gulp 			= require('gulp'),
  browserSync		= require('browser-sync').create(),
  autoprefixer 	= require('gulp-autoprefixer'),
  concat			= require('gulp-concat'),
  sass			= require('gulp-sass'),
  cleancss		= require('gulp-clean-css'),
  jade 			= require('gulp-jade'),
  minify			= require('gulp-minify'),
  data 			= require('gulp-data'),
  path			= require('path'),
  fs				= require('fs')

...

gulp.task('jade', function(done) {
  let LOCALS = {}

  gulp.src('app/*.jade')
    .pipe(data( function(file) {
      return JSON.parse(
        fs.readFileSync('./app/data/data.json')
      )
    }))
    .pipe(jade({
      locals: LOCALS,
      pretty: true
    }))
    .pipe(gulp.dest('app'))

  done()
})

...

And the Jade file itself:

index.jade

nav.navbar-list
                - var nav = navigationData
                ul
                  each val in nav
                    li.navbar-list-item
                      a(href=val.url)=val.name

I end up with an error:

events.js:167                                                                                                                                                                                                               
      throw er; // Unhandled 'error' event                                                                                                                                                                                  
      ^                                                                                                                                                                                                                     
TypeError: C:\Users\elliz\OneDrive\Документы\Работа\Тестовые задания\alef\app\index.jade:18                                                                                                                                 
    16|                                                                 - var nav = navigationData                                                                                                                          
    17|                                                                 ul                                                                                                                                                  
  > 18|                                                                         each val in nav                                                                                                                             
    19|                                                                                 li.navbar-list-item                                                                                                                 
    20|                                                                                         a(href=val.url)=val.name                                                                                                    
    21|                                                                                                                                                                                                                     
                                                                                                                                                                                                                            
Cannot read property 'length' of undefined

What am I doing wrong? I just don't quite understand how gulp injects this data and how to access it.

Answer 1

Contrary to all the documentation in gulp-jade and gulp-data, it turned out that you need to do this:

gulp.task('jade', function(done) {
  gulp.src('app/*.jade')
    .pipe( data(file => require('./app/data/data.json')))
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('app'))

  done()
})

Answer 2

in gulpa

return JSON.parse(
        fs.readFileSync('./app/data/data.json')
      ); <------- ';'

But I think that you need to bring the JSON file into this form.
I had a Pug + Json working option here