How to create Divs within Java and use Json

Asked

Viewed 209 times

0

I am trying to create and fill several html cards according to the return Json I have of a PHP file, I have Javascript that takes the Json array, my doubt is how to create several cards within this 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");
    }
});

Card HTML 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 create line by line from card within Javascript ? has some other way of doing this ?

php javascript html ajax json

  • I’m learning how to use Vue.js and I think it would be very useful for you. For what you want to do I think would be a great solution, because you can make a card template where you will receive the data and Vue.js duplicates the cards according to the JSON records. https://vuejs.org/ for you to know better

1 answer

0

Look how I answered in the question comment, I think Vue.js would be much better for you.

Here I give a very easy example of how to use. 

new Vue({
  el: '#v-for-cards',
  data: {
     itens: [{"titulo":"Titulo do card 1", "descricao":"Descrição de teste"},{"titulo": "Titulo do Card 2", "descricao":"mais um teste"}]
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="v-for-cards">
      <div v-for="(item, keyitem) in itens">
           <h1> Titulo: {{ item.titulo }} </h1>
           <p> {{ item.descricao }}</p>
           <hr>
       </div>
</div>

Browser other questions tagged php javascript html ajax json

You are not signed in. Login or sign up in order to post.