Question

如何将我的json列表设置为素材卡？

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

现在我试图将它显示为一个小型的卡片列表，但我正在努力：

   <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文件中的整个项目列表都位于同一张卡片上，而不是分开创建多个样式的卡片。

这是我的php文件，它将msqli表中的数据转换为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

我认为你没有附加它。你必须使用这样的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);

Answer 2

非常好的问题：您可以使用多个库来解析和样式化json： Handlebars is a library that allows you to parse your json with ease and include each json object in your html

另一个是Moustache。但我的解决方案是把手。首先将您的json转换为实际的jsonfile，如下所示......

$json_data = json_encode($posts);
file_put_contents('ldt.json', $json_data);

在php中添加这两行而不是echo.ldt是文件名，你可以随意调用它。

Nextstep：使用把手解析json文件..

var yourRequest = new XMLHttpRequest();
yourRequest.open('GET', 'ldt.json');

然后在把手上创建一个函数和......指针把手来生成解析json的html（myhtml）并将其分配给一个名为的id：例如mycontainer：

var rawTemplate = document.getElementById("thisTemplate").innerHTML;
        var myContainer = document.getElementById("my-container");
      my.innerHTML = ourGeneratedHTML;

然后在你的html：

<div id="my-container"></div>

 <script id="thisTemplate" type="text/x-handlebars-template">
//And here call your objects:Example

     {{#each bananas}}
        <div class="col-md-4">
          <div class="box box-widget widget-user">
               <div class="widget-user-header bg-black" style="background: url('{{img}}'>) center center;">
     <h3 class="widget-user-username"><b>{{name}}</b></h3>
    <h5 class="widget-user-desc">({{type}})</h5>

请确保您的css实际上创建了所谓的卡片等等。您的卡片列表将填充您的页面，就像您使用已解析的所有对象设置样式一样。我只是添加了一小段代码。有关更多信息，请查看： Handlebars

使用ajax并创建自己的元素并没有错，但如果你想一举两得，请使用库。 youtube上还有很多关于你可以观看的内容。我希望这有帮助

设置一个json列表

2 个答案: