Working with data

It can be very handy to reference data from a Javascript array or even a JSON style object to add data to your prototype.

Since we are working with the pug templating, which is Javascript-aware, you can easily work with data in your templates.

For example, add this to a template:

-
    let names = [
        {
            "firstName": "Tomasa",
            "lastName": "Lesch"
        },
        {
            "firstName": "Frank",
            "lastName": "Underwood"
        }
    ];

Now, you can reference the data in your template:

-
    each name in names
        p #{firstName} #{lastName}

Using the data folder

To structure your project’s data with some more organization, you can use the data folder.

Any .js or .json file in the data folder can be used as a source to reference data from.

In the default install of Bedrock, you can find some examples of data being loaded.

You could look at these examples and dive in, or read on for more explanations.

Creating lists with data – example

Filename: data/example-array.js

The filename determines how to call the data, e.g. a file called apples.js will be available on contentData.apples. If you have something like news-items.js which contains a dash, we will convert it to camelCase and it will be available via contentData.newsItems.

'use strict';

let exampleArray = [
    {
        "id": 0,
        "firstName": "Tomasa",
        "lastName": "Lesch"
    },
    {
        "id": 1,
        "firstName": "Frank",
        "lastName": "Underwood"
    }
];

module.exports = exampleArray;

Note the usage of `use strict` and module.exports; this is necessary to expose data to your templates.

Now, in your template:

ul
    each person in contentData.exampleArray
        li
            span= person.id
            span Hello, my name is #{person.firstName} #{person.lastName}!

Note the usage of `contentData` in the `each` part of the pug code. An object or array local to a template does not need this.

Other data examples

Working with data – faker.js example

This example shows to how to use a combination of the moment.js and faker.js libraries to generate random data.

Data code:

'use strict';

const moment = require('moment');
const faker = require('faker');

/*
  Helper functions
*/

function getRandomFromArray(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
}

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

/*
  Data
*/

const TITLES = [
  'My title 1',
  'My title 2'
];

const LOCATIONS = [
  'Location 1',
  'Location 2'
];

// Generate random articles
let news = new Array(10).fill('').map(() => ({
    date: moment(faker.date.past(1)).format('DD MMM YYYY'),
    title: getRandomFromArray(TITLES) + " | " + getRandomFromArray(LOCATIONS),
    author: faker.name.firstName() + " " + faker.name.lastName(),
    longDescription: capitalizeFirstLetter(faker.lorem.words(50))
}));

module.exports = news;

Template code:

each article, index in contentData.news
    p #{article.date}
    h3
        a(href="#") #{article.title}
            p #{article.longDescription}

Working with objects – example

Filename: data/example-object.js

Data code:

'use strict';

let exampleObject = {
    fruits: ['banana', 'apple'],
    veggies: ['lettuce', 'tomato']
};

module.exports = exampleObject;

Template code:

each type, typeName in contentData.exampleObject
    ul
        li= typeName
        ul
            each product in type
                li= product