Populate templates with content without Angular - frontend

Question

I have a fully functioning prototype of an HTML5 news card, and I need to populate 50 or so cards with unique content. I am asking for suggestions for a more efficient way to add content to each card other than copying, cutting, and pasting from the Excel spreadsheet. The spreadsheet's columns contain each card's news category, date, title, and external URL. I have also just been asked to include the image from the news article that the card links to - I cannot imagine how that could be automated. This project uses Bootstrap styling, data-category attribute on a tag in each card, and is a Laravel website; it does not include Angular, Mustache, Handlebars, or a templating pattern. Is there a way I could create a custom template for these news cards without needing to install a framework or template engine? Could I use data attributes?
Here is the HTML for one card:
<div class="col-lg-4 col-md-6">
<section class="news-box" data-category="blog">
<figure>
<img src="/material-icons/ic_recent_actors_black_24dp/web/ic_recent_actors_black_24dp_2x.png" class="img-responsive opacity-3">
<figcaption>Blog</figcaption>
</figure>
<h3 class="h6">Title of Blog Post</h3>
<figure>
<img src="images/news/pic2.jpg" class="img-responsive">
</figure>
<p>luctus et ultrices posuere cubilia Curae; quam erat volutpat. Phasellus dignissim euismod luctus.In leo mauris, blandit quismalesuada lobortis, fringilla a ipsum.</p>
</section>
</div>

Answer 1

So this might not be the best answer, but these are my 2 cents.
You will first have to convert your Excel sheet to csv and then to a json object. I think this can be easily achieved with online converters like this: http://www.convertcsv.com/csv-to-json.htm (haven't tried that myself, just pasted the first google result). Your json object will then look like var foo = [{...},{...},...] (see snipet)
Create your "card template" with dummy placeholders like card_title card_img. Hide it.
In your js file, iterate over all the elements in your json object and use the template you just created to replace all the placeholders. (var newItem = myTemplate.replace('blog_title',val.blog_title)...)
Append the resulting html snippet to the cards container.
$(document).ready(function(){
var template = $(".card-template").html(); //get the card template html
$.each(foo, function(idx, val){ //iterate over the json object
var newCard = template.replace('card_title',val.title).replace('card_image',val.img).replace('card_content',val.content); //make a copy of the template and replace the placeholders with the real data
$(".cards-container").append(newCard); //append the card to the container row
});
});
var foo = [
{
'title':'Gotta catch em all',
'img':'http://i.imgur.com/tmgWXUP.jpg',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
},
{
'title':'Trumpers trumping Trump',
'img':'http://i.imgur.com/C7z53mE.gif',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
},
{
'title':'Aint no hacker',
'img':'http://i.imgur.com/vQGnFD4.jpg',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
}
]
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row cards-container">
<!-- inject cards here -->
</div>
<div class="card-template hide">
<div class="col-xs-3">
<h2>card_title</h2>
<img src="card_image" class="img-responsive">
<p>card_content</p>
</div>
</div>
You could also try to do it with vanilla js, but it's up to you.

Answer 2

$(document).ready(function(){
var template = $(".card-template").html(); //get the card template html
$.each(foo, function(idx, val){ //iterate over the json object
var newCard = template.replace('card_title',val.title).replace('card_image',val.img).replace('card_content',val.content); //make a copy of the template and replace the placeholders with the real data
$(".cards-container").append(newCard); //append the card to the container row
});
});
var foo = [
{
'title':'Gotta catch em all',
'img':'http://i.imgur.com/tmgWXUP.jpg',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
},
{
'title':'Trumpers trumping Trump',
'img':'http://i.imgur.com/C7z53mE.gif',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
},
{
'title':'Aint no hacker',
'img':'http://i.imgur.com/vQGnFD4.jpg',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
}
]
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row cards-container">
<!-- inject cards here -->
</div>
<div class="card-template hide">
<div class="col-xs-3">
<h2>card_title</h2>
<img src="card_image" class="img-responsive">
<p>card_content</p>
</div>
</div>