Accessing nested object with pug, json, htmlwebpackplugin

Question

I seem to be having an issue accessing a value from a mixin when trying to use bracket notation. I have the following setup:

// in webpack plugins
new HtmlWebpackPlugin({
            hash: true,
            template: './assets/template/about.pug',
            filename: 'about-us.html',
            inject: true,
            page: 'about',
            locals: require('./assets/data.json'),
            chunks: ['about']
        }),

The json

// data.json (snippet)
{
    "pages" : {
        "about" : {"title" : "About Us","metaDesc" : ""},
    }
}

Pug mixin

mixin pageTitle(thePage)
    title= htmlWebpackPlugin.options.locals.pages[thePage].title

Using pug mixin

+pageTitle(htmlWebpackPlugin.options.page)

I get an error Cannot read property 'title' of undefined.

If I change that to htmlWebpackPlugin.options.locals.pages.about.title it will parse just fine.

If I change that to htmlWebpackPlugin.options.locals.pages[thePage] it will return [object Object] but I can't access any properties.

If I change that to htmlWebpackPlugin.options.page or just use thePage then "about" will be rendered.

I've done a typeof to check if it's a string. It is. I've tried putting it into a variable first. Same issue.

Any thoughts?

Grzegorz T. · Answer 1 · 2020-07-02T21:25:58.407

Why do you need notation in brackets? What is the purpose of this? This record works title = thePage.pages.about['title']

I prefer the following entry ;)
In the file about.pug, make an entry at the very top.

block variables
- var path = self.htmlWebpackPlugin.options

You pass on to the function

// locals is the path to your json file
+pageTitle(path.locals)

Mixin should look like this

mixin pageTile(thePage)
  title = thePage.pages.about.title

Here you have the whole example in addition with generating multiple subpages with pug-loader → photoBlog

Accessing nested object with pug, json, htmlwebpackplugin

1 Answers1