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

我正在尝试基于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" } ]'; 

这是我试过JQUERYfunction

  $(document).ready(function () { $('body').append('

'); var html = '
'; html += ''; var flag = 0; var data2 = ; $.each(data2[0], function(index, value){ html += '
'+index+'
'; }); html += ''; $.each(data2, function(index, value){ html += '
'; $.each(value, function(index2, value2){ html += ''+value2+''; }); html += '
'; }); html += '
'; $('body').append(html); console.log(html); });  

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

但我真的需要这个

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

Answer 1

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

 $.each(valMS, function(index, v){ if(index % 3 === 0){ html += '
'; } html += '
'; html += '
'; html += '
'+v["Subject"]+'
'; html += '
'+v["Message"]+'
'; html += '
'+v["Date"]+'
'; html += '
'; html += '
'; if(index % 3 === 2 || index == (valMS.length - 1)){ html += '
'; } }); 

上面的代码我使用了col-md-4 ，这将是桌面分辨率的1/3列。 如果你想从所有的屏幕（移动也），使用col-xs-4替换col-md-4 col-xs-4检查下面的代码 – 演示

 $.each(valMS, function(index, v){ if(index % 3 === 0){ html += '
'; } html += '
'; html += '
'; html += '
'+v["Subject"]+'
'; html += '
'+v["Message"]+'
'; html += '
'+v["Date"]+'
'; html += '
'; html += '
'; if(index % 3 === 2 || index == (valMS.length - 1)){ html += '
'; } }); 

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

 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 = '
'; var flag = 0; $.each(valMS, function(index, v){ html += '
'; html += '
'+v["Subject"]+'
'; html += '
'+v["Message"]+'
'; html += '
'+v["Date"]+'
'; html += '
'; }); html += '
'; $('body').append(html); });    

工作示例演示

Answer 2

Rooter，我只修改了@Sai的如何创建基于JSON输出的Bootstrap面板这个答案。 这显示每行3个面板。 这是代码

Answer 3

请检查一下，因为它会提供预期的结果