javascript - 如何基于 JSON 输出创建 Bootstrap 面板

Question

我正在尝试根据 JSON 输出生成 Bootstrap 面板。 这是我的示例 JSON 输出

$valMS = '[
  {
    "Subject": "Test",
    "Message": "rooter",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "binu",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "cal",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "nera",
    "Date": "12-03-17"
  }
]';

这是我试过的 JQUERY 函数

<script>
    $(document).ready(function () {
    $('body').append('<div class="container" ></div><br>');

    var html = '<div class="container" ><div class="panel panel-default">';
    html += '';
    var flag = 0;

    var data2   =   <?php echo $valMS; ?>;
    $.each(data2[0], function(index, value){
        html += '<div class="panel-heading">'+index+'</div>';
    });
    html += '';
     $.each(data2, function(index, value){
         html += '<div class="panel-body">';
        $.each(value, function(index2, value2){
            html += ''+value2+'';
        });
        html += '</div>';
     });
     html += '</div>';
     $('body').append(html);
     console.log(html);
});
</script>

根据我的代码生成这样的面板

可是我真的很需要这个

我需要在我的代码中更改什么。如何为此 JSON 输出生成面板。谢谢

Answer 1

更新的答案 和 Demo which will show 3 panels per row. 将结果窗口驻留在fiddle 中查看。 只需更改 $.each 方法中的代码即可获得预期的每行 3 个面板

$.each(valMS, function(index, v){
            if(index % 3 === 0){
          html += '<div class="row">';
        }
        html += '<div class="col-md-4">';
        html += '<div class="panel panel-default">';
        html += '<div class="panel-heading">'+v["Subject"]+'</div>';
        html += '<div class="panel-body">'+v["Message"]+'</div>';
        html += '<div class="panel-footer">'+v["Date"]+'</div>';
        html += '</div>';
        html += '</div>';
        if(index % 3 === 2 || index == (valMS.length - 1)){
          html += '</div>';
        }
     });

我在上面的代码中使用了 col-md-4，这将是桌面分辨率的 1/3 列。 如果你想在所有屏幕上使用它(也包括移动设备)，请将 col-md-4 替换为 col-xs-4 检查下面的代码 - Demo

$.each(valMS, function(index, v){
                if(index % 3 === 0){
              html += '<div class="row">';
            }
            html += '<div class="col-xs-4">';
            html += '<div class="panel panel-default">';
            html += '<div class="panel-heading">'+v["Subject"]+'</div>';
            html += '<div class="panel-body">'+v["Message"]+'</div>';
            html += '<div class="panel-footer">'+v["Date"]+'</div>';
            html += '</div>';
            html += '</div>';
            if(index % 3 === 2 || index == (valMS.length - 1)){
              html += '</div>';
            }
         });

我重构了你的代码，正如你所问的那样工作正常请检查 Demo

var valMS = [
  {
    "Subject": "Test",
    "Message": "rooter",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "binu",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "cal",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "nera",
    "Date": "12-03-17"
  }
],html;

 $(document).ready(function () { 
  html = '<div class="container" >';
    var flag = 0;
    $.each(valMS, function(index, v){
        html += '<div class="panel panel-default">';
        html += '<div class="panel-heading">'+v["Subject"]+'</div>';
         html += '<div class="panel-body">'+v["Message"]+'</div>';

        html += '<div class="panel-footer">'+v["Date"]+'</div>';
         html += '</div>';
     });
     html += '</div>';
     $('body').append(html);
});



<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

working example Demo