Get Programming with JavaScript

Get Programming with JavaScript - Listing 19.08

Listing 19.08 - Building a list using a template

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;
}

function fillList (template, dataArray) {
    var listString = "";

    dataArray.forEach(function (data) {
        listString += fill(template, data);
    });

    return listString;
}


// Test the function

var posts = [
    {
        title: "Fitness App v1.0 Live!",
        body: "Yes, version 1 is here...",
        posted: "October 3rd, 2016",
        author: "Oskar",
        social: "@appOskar51"
    },
    {
        title: "Improved Formatting",
        body: "The app's looking better than ever...",
        posted: "October 8th, 2016",
        author: "Kallie",
        social: "@kal5tar"
    },
    {
        title: "We've Gone Modular",
        body: "Wow, it's so much easier to work this way...",
        posted: "October 12th, 2016",
        author: "Oskar",
        social: "@appOskar51"
    },
    {
        title: "Positive Feedback!",
        body: "It seems the testers are really loving the app...",
        posted: "October 13th, 2016",
        author: "Mahesha",
        social: "@MaheshaMash"
    }
];

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

newsContainer.innerHTML = fillList(templateString, posts);

Further Adventures

Listing 19.08 - A function to fill templates with data - Task 1

Update the app so that it uses three buttons: Previous, Next and All.
Previous and Next show one post at a time.
All displays all of the posts at once.

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;
}

function fillList (template, dataArray) {
    var listString = "";

    dataArray.forEach(function (data) {
        listString += fill(template, data);
    });

    return listString;
}


// Test the function

var posts = [
    {
        title: "Fitness App v1.0 Live!",
        body: "Yes, version 1 is here...",
        posted: "October 3rd, 2016",
        author: "Oskar",
        social: "@appOskar51"
    },
    {
        title: "Improved Formatting",
        body: "The app's looking better than ever...",
        posted: "October 8th, 2016",
        author: "Kallie",
        social: "@kal5tar"
    },
    {
        title: "We've Gone Modular",
        body: "Wow, it's so much easier to work this way...",
        posted: "October 12th, 2016",
        author: "Oskar",
        social: "@appOskar51"
    },
    {
        title: "Positive Feedback!",
        body: "It seems the testers are really loving the app...",
        posted: "October 13th, 2016",
        author: "Mahesha",
        social: "@MaheshaMash"
    }
];

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

var itemIndex = 0;

function showPrevious () {
    itemIndex--;
    if (itemIndex < 0) {
        itemIndex = posts.length - 1;
    }
    newsContainer.innerHTML = fill(templateString, posts[itemIndex]);
}

function showNext () {
    itemIndex++;
    if (itemIndex > posts.length - 1) {
        itemIndex = 0;
    }
    newsContainer.innerHTML = fill(templateString, posts[itemIndex]);
}

function showAll () {
    newsContainer.innerHTML = fillList(templateString, posts);
}

document.getElementById("btnPrev").addEventListener('click', showPrevious);
document.getElementById("btnNext").addEventListener('click', showNext);
document.getElementById("btnAll").addEventListener('click', showAll);

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fitness App News</title>
</head>
<body>

<h1>Fitness App News</h1>
    
<p>
<button id="btnPrev">Previous</button>
<button id="btnNext">Next</button>
<button id="btnAll">All</button>
</p>

<div id="news"></news>


    <script type="text/template" id="newsItemTemplate">
        <div class="newsItem">
            <h3>{{title}}<span> - by {{author}}</span></h3>
            <p>{{body}}</p>
            <p class="posted"><em>Posted: {{posted}}</em></p>
            <p class="follow">Follow {{author}} {{social}}</p>
        </div>
    </script>

</body>
</html>