Currently, I am in the process of comparing various popular javascript frameworks and I need to generate an HTML element for each object retrieved from an API.
const frameworks = [
{
name: "angular"
},
{
name: "ember"
},
{
name: "react"
},
{
name: "vue"
}
];
For simplicity, I am working with an array of objects (this is just a simplified version for easier readability).
I have a function that iterates through this array and at the moment, it only logs the name of the framework to the console. If I want to create an HTML element (such as a bootstrap card) for each item in the loop, what would be the most efficient approach?
frameworks.forEach(fw => {
console.log(fw);
});
Simply using a forEach function.
<div class="card" style="width: 18rem;">
<img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
I am attempting to accomplish this using vanilla JS instead of utilizing React. This approach seems a bit tedious. Should I create a template with the createElement()
function to streamline this process?