如何基于JSON输出创建Bootstrap面板 [英] How to create Bootstrap panel based on JSON output

问题描述

我正在尝试根据 JSON 输出生成 Bootstrap 面板。
这里是我的样本 JSON 输出

I'm trying to generate Bootstrap panel based on JSON output. here is my sample JSON output

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

here is I tried JQUERY function

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

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

According to my code which generates panel like this

但我真的需要这个

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

What I need to change in my code. How to generate panels for this JSON output. Thank you

推荐答案

更新答案和 演示，每行显示3个面板。 驻留在小提琴中的结果窗口。
只需更改 $。每个 方法中的代码，即可获得每行预期的3个面板

Updated Answer and Demo which will show 3 panels per row. Reside result window in fiddle to see. Just change the code inside the $.each method to get the expected 3 panels per row

$.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列。
如果您想从所有屏幕（移动设备）获得它，请用 <$ c替换 col-md-4 $ c> col-xs-4 检查以下代码 - 演示

Above code i used col-md-4 which will 1/3 column in desktop resolution. If you want it from all the screens(Mobile also), Replace col-md-4 with col-xs-4 check below code for it - 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>';
            }
         });

我重构了你的代码，它的工作正常你所问的请检查 演示

I Refactored your code, It is working fine as you asked in question Please check 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

这篇关于如何基于JSON输出创建Bootstrap面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！