Add as many cards as there are values after query

Question

I am trying to create as many Materializecss cards as there are values after Firebase query.

E.g I do in Jquery:

$(document).ready(function() {
    var brandsRef = firebase.database().ref().child("Brands");
    brandsRef.once('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
    var childKey = childSnapshot.key;
    //Append cards here card title would be childKey
    });
    });
});

If the childKey = 5, I want that 5 cards appears with the childKey value.

I know that I can append lists like this:

$(".collection").append('<a href="index.html" class=" collection-item">'+childKey+'</li>');

but do not know how to nest for the cards.

Answer 1

An alternative answer with pure js

$(document).ready(function() {
   var i = 0;
   var cardsObject = [{
       title: "Title 1",
       content: "Content 1",
     }, {
       title: "Title 2",
       content: "Content 2",
     }, {
       title: "Title 3",
       content: "Content 3",
     }];

     while (i < cardsObject.length) {
       var yourData = i;
       createCard(cardsObject[i])
       i++;
     };

     function createCard(cardObject) {
       var divCard = document.createElement("div");
       divCard.setAttribute("class", "card");
       var divCardContent = document.createElement("div")
       divCardContent.setAttribute("class", "card-content");
       var divCardTitle = document.createElement("span")
       divCardTitle.setAttribute("class", "card-title");
       var link = document.createElement("a");
       link.setAttribute("href", "index.html");
       link.setAttribute("class", "collection-item");
       var parag = document.createElement("p");
       link.innerHTML = "Botão 1";
       parag.innerHTML = cardObject.content;
       divCardTitle.innerHTML = cardObject.title;

       divCardContent.appendChild(divCardTitle);
       divCardContent.appendChild(parag);
       divCardContent.appendChild(link);
       divCard.appendChild(divCardContent);
       document.getElementsByClassName("collection").appendChild(divCard);
     }
   });

Here's the code JSFiddle