Как вывести данные из локального .json файла в разметку на Pug?

Question

[Леонид Марков]

У меня стоит задача - сверстать страничку на Pug и в определенные места в разметке вставить данные из локального data.json файла. И я вот не пойму, каким способом его интегрировать в .pug файл - как-то через include или использовать require? Или может еще какой способ есть? А то сколько ни гуглил - все инфа какая-то противоречивая попадается, а в доках по Pug вообще ничего по этой теме нет

Comments

[Александр Зачиналов]

с помощью чего вы Pug в HTML выгоняете? Могу подсказать, если дополните вопрос этой информацией

[Леонид Марков]

Александр Зачиналов, В HTML я его выгоняю через Gulp-сборку

Answer 1

[Александр Зачиналов]

gulpfile.js

const Gulp = require('gulp');
const Pug = require('gulp-pug');
const Fs = require('fs');

const dataFromFile = JSON.parse(Fs.readFileSync('./data.json'))

// Pug to HTML
Gulp.task('pug', () =>
    Gulp.src('./*.pug')
    .pipe(Pug({
        pretty: true,
        locals: dataFromFile || {}
    }))
    .pipe(Gulp.dest('./build'))
);

data.json

{
	"sections": {
		"html": {
			"name": "HTML",
			"color": "#e44d26"
		}
	}
}

*.pug
.test= sections.html.color

или
.test #{sections.html.color}

Comments

[Александр Зачиналов]

данные из json пишем в переменную, чтобы кэшировать их при наличии большого кол-ва pug файлов... если нужен кэш на уровне чтения файловой системы и вы не собираетесь часто обновлять содержание json, то можно воспользоваться плагином gulp-data

[Леонид Марков]

Спасибо большое! Решение, конечно, хорошее. Но это для случая, когда в итоговом билде нужно просто получить HTML с вставленными данными. Только вот хотелось бы получить в итоге своего рода сервис, получающий данные с json, но работающий уже без галпа на обычном хостинге
Это вообще возможно сделать так, чтобы в скомпилированном билде получался HTML с javascript-ом, где есть обработчик data.json файла?

[Александр Зачиналов]

Значит не так понял... В таком случае, вы можете загружать данные из json аякс-запросом (https://learn.javascript.ru/ajax-xmlhttprequest) и строить при обходе полученного из него объекта любое содержимое через JS. Сам скрипт может быть в подключаемом файле, либо содержаться внутри html-документа (https://pugjs.org/language/includes.html#including...

[Леонид Марков]

Александр Зачиналов, А разве аякс запросом можно получать локальные данные с диска? Насколько я понял, аякс получает данные с сервера по пути типа https://name.com/data.json и т.п. А как тогда получить данные по пути типа "./js/data.json"? У меня чет ничего не выходит

[Александр Зачиналов]

С диска нет, запрос возможен только при наличии хоста, если вы локально запускаете сервер, то всё должно работать