样式化JSON列表

Question

how do i style my json list to material cards?

My json/javascript:

$(document).ready(function(){
     var url="getjson.php";

     $.getJSON(url,function(data){
      console.log(data);
      $.each(data.bananas, function(i,post){ 
            var banana =

             "<div>"
      +"<h3>"+post.name+"</h3>"
        +"<h5>"+post.type+"</h5>"
      +"</div>";

      $(banana).appendTo("#banana-data");
      });

now im trying to display it as a nicelt style list of cards but im struggling:

   <div class="row">
        <div class="col-md-4">
             <div id="banana-data" class="box box-widget widget-user">
             <div class="widget-user-header bg-aqua-active">
              <h3 class="widget-user-username"></h3>
              <h5 class="widget-user-desc"></h5>

                   </div>
            </div>
      </div>      
  </div>

But my content appears outside the style of my I tried using list as follows:

         <ol id="banana-data">
        <div class="row">
        <div class="col-md-4">
             <div  class="box box-widget widget-user">
             <div class="widget-user-header bg-aqua-active">
              <h3 class="widget-user-username"></h3>
              <h5 class="widget-user-desc"></h5>

                   </div>
            </div>
      </div>      
  </div>  
    </ol>


          var banana =

         "<ol>"
  +"<h3>"+post.cname+"</h3>"
    +"<h5>"+post.sub_type+"</h5>"
  +"</ol>";

  $(banana).appendTo("#banana-data");
  });

The content displayed inside my style,but the entire list of items in the json file was sitting on the same card,and not separating to create multiple styled cards.

this is my php file that converted the data in the msqli table to json:

    <?php

    require_once 'dbconfig.php';
    $posts = array();
    $query = "SELECT * FROM bananas";

    $stmt = $db_con->prepare($query);
    $stmt->execute();

    while($row=$stmt->fetch(PDO::FETCH_ASSOC)) {

        $posts['bananas'][] = $row;
    }

    echo json_encode($posts);
?>

Answer 1

I think you have not append it.You have to use after() method like this..

 $("#banana-data").after(banana);

So change your script:

$(document).ready(function(){
     var url="getjson.php";

     $.getJSON(url,function(data){
      console.log(data);
        banana = "";
      $.each(data.bananas, function(i,post){ 
            banana +=

             "<div>"
      +"<h3>"+post.name+"</h3>"
        +"<h5>"+post.type+"</h5>"
      +"</div>";
      });
    $("#banana-data").after(banana);