javascript - 样式化 json 列表

Question

我如何将我的 json 列表设置为 Material 卡片？

我的 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");
      });

现在我试图将它显示为 nicelt 样式的卡片列表，但我很挣扎:

   <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>

但是我的内容出现在我的风格之外 我尝试使用列表如下:

         <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");
  });

内容显示在我的样式中，但 json 文件中的整个项目列表都位于同一张卡片上，而不是分开创建多个样式卡片。

这是我将 msqli 表中的数据转换为 json 的 php 文件:

    <?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

我想你还没有附加它。你必须像这样使用 after() 方法..

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

所以改变你的脚本:

$(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);