I'm trying to create and fill in several html cards according to the Json return I have from a PHP file, I have Javascript that takes the Json array, my question is how do I create multiple cards within that javascript?
Javascript
$(function(){
carregar(0,12,'Chamadas/testeCarregarAnuncios.php');
$("#carregarMais").click(function(evento){
evento.preventDefault();
var init = $().length;
carregar(init, 12, 'Chamadas/testeCarregarAnuncios.php');
});
function carregar(init, max, url){
var dados = {init: init, max : max};
$.post(url, dados, function(data){
for(i = 0; i < data.dados.length; i++){
}
var anunciosExibidos = $("").length;
if(anunciosExibidos== data.totalAnuncios)
{
$("#carregarMais").hide();
}
},"json");
}
});
HTML card I need to create for face return json
<a style="display: block; color: rgba(0,0,0,0.87);" href="#">
<div style="box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); overflow: hidden; margin-bottom: 6px;">
<div class="col s4 m4" style="padding: 0px; margin: 0px;">
<div style="width: 100%; overflow: hidden;">
<div style="display: inline-block; position: relative; right: -50%;">
<img src="img/hardware2.jpg" alt="user background" style="height: 150px; width: auto; position: relative; left: -50%; vertical-align: bottom;">
</div>
</div>
</div>
<div class="col s8 m8 truncate-text" style="padding-left: 14px; padding-top: 8px; height: 150px;">
<span class="grey-text text-darken-4" style="font-size: 20px;"></span>
<br>
<span class="grey-text"></span>
<br>
<div class="star-result" style="margin-bottom: -10px;">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.checked {
color: orange;
}
</style>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<br>
<i class="mdi-image-navigate-next cyan-text text-darken-2"></i>
<span class="cyan-text text-darken-2">Informática</span>
<br>
<i class="mdi-communication-location-on cyan-text text-darken-2"></i>
<span class="cyan-text text-darken-2"></span>
</div>
</div>
</a>
Should I create line the card's line inside Javascript? have any other way to do this?