Как взять данные из файла .json и итерировать их в Jade?

Question

[dicem]

Вобщем, имеется массив данных:

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"
		}
	]
}

Собираю проект через 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()
})

...

И собсна сам Jade файл:

index.jade

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

Получаю в итоге ошибку:

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

Что я не так делаю? Просто не совсем понимаю, каким образом gulp внедряет эти данные и каким образом к ним обращаться.

Answer 1

[dicem]

Вопреки всем документациям в gulp-jade и gulp-data оказалось, что нужно делать так:

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

[inkShio]

в гульпе

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

Но думаю, что тебе JSON файл надо привести в такой вид.

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"}]}

У меня тут было Pug + Json вариант рабочий