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

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>