A function to fill templates with data

Get Programming with JavaScript - Listing 19.07

Listing 19.07 - A function to fill templates with data


function fill (template, data) {

    Object.keys(data).forEach(function (key) {
        var placeholder = " + key + ";
        var value = data[key];

        while (template.indexOf(placeholder) !== -1) {
            template = template.replace(placeholder, value);
        }
    });

    return template;
}


// Test the fill function

var data = {
    title: "Fitness App v1.0 Live!",
    body: "Yes, version 1 is here...",
    posted: "October 3rd, 2016",
    author: "Oskar",
    social: "@appOskar51"
};

var templateScript = document.getElementById("newsItemTemplate");
var templateString = templateScript.innerHTML;
var newsContainer = document.getElementById("news");

newsContainer.innerHTML = fill(templateString, data);

Further Adventures

Listing 19.07 - A function to fill templates with data - Tasks 1 & 2

Replace the author property with firstName and lastName properties.
On the HTML panel, update the template to use the new properties.

JS


function fill (template, data) {

    Object.keys(data).forEach(function (key) {
        var placeholder = " + key + ";
        var value = data[key];

        while (template.indexOf(placeholder) !== -1) {
            template = template.replace(placeholder, value);
        }
    });

    return template;
}


// Test the fill function

var data = {
    title: "Fitness App v1.0 Live!",
    body: "Yes, version 1 is here...",
    posted: "October 3rd, 2016",
    firstName: "Oskar",
    lastName: "Smith",
    social: "@appOskar51"
};

var templateScript = document.getElementById("newsItemTemplate");
var templateString = templateScript.innerHTML;
var newsContainer = document.getElementById("news");

newsContainer.innerHTML = fill(templateString, data);

HTML


<script type="text/template" id="newsItemTemplate">
<div class="newsItem">
    <h3>A function to fill templates with data<span> - by  </span></h3>
    <p></p>
    <p class="posted"><em>Posted: </em></p>
    <p class="follow">Follow   </p>
</div>
</script>