How to create Bootstrap panel based on JSON output

Question

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"
  }
]';

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

But I really need this

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

As example, do you you want to display: Test, rooter, 12-03-17 in a row? — Jitu Raiyan
– Jitu Raiyan, Commented Apr 10, 2017 at 21:27
@JituRaiyan stackoverflow.com/a/43321073/7362095 this answer works fine. but I need to display panel like this image i.imgur.com/FJSXA2o.png 3 panels for each row — Rooter
– Rooter, Commented Apr 10, 2017 at 21:36
ok, I'll modifying this (stackoverflow.com/questions/43319262/…) answer — Jitu Raiyan
– Jitu Raiyan, Commented Apr 10, 2017 at 21:44

S B · Accepted Answer · 2017-04-11 05:33:28Z

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

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

@Sai how can I display 3 panel for each row. like this image i.imgur.com/FJSXA2o.png

Community · Accepted Answer · 2017-05-23 12:10:40Z

2

Rooter, I just modify @Sai's How to create Bootstrap panel based on JSON output this answer. And this shows 3 panel in each row. Here is the code for that

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<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>
	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"><div class="row">';
	    var flag = 0;
	    $.each(valMS, function(index, v){
	        html += '<div class="col-md-4"><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></div>';
	     });
	     html += '</div></div>';
	     $('body').append(html);
	});
</script>
</body>
</html>

And here is the output:

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Apr 10, 2017 at 21:55

Jitu Raiyan

5367 silver badges13 bronze badges

5 Comments

Rooter Over a year ago

Thank you Jitu. ur a great man :) I'm really happy about u . u helped much more for me today . thanks again :D

Jitu Raiyan Over a year ago

Welcome @Rooter

S B Over a year ago

@JituRaiyan you should not copy others answer. If your using other answers code then should mentions name

S B Over a year ago

Your code may brake as you added all the columns in single 'row'. row max columns should be 12 only. i've already updated my answer.Please check. Thanks

Jitu Raiyan Over a year ago

Yes, I mentioned your name in my answer. Your last updated answer is right. But, there is nothing wrong in my answer. If 12 columns are overloaded in a single row then the extra columns goes down.

RITESH ARORA · Accepted Answer · 2017-04-11 05:04:24Z

1

Please check this out as it will provide expected result

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <title></title>
</head>
<script>
$(document).ready(function() {
  // $('body').append('<div class="container"></div><br>');

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

  var data2 = [{
    "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"
  }];

  $.each(data2, function(index, value) {
    var count = 1;
    html += '<div class="panel panel-default col-xs-3" style="padding:0;margin:3%">';
    for (var key in value) {

      if (count % 2 != 0) {
        html += '<div class="panel-heading">' + value[key] + '</div>';
      } else {
        html += '<div class="panel-body">' + value[key] + '</div>';
      }
      count++;
    }
    html += '</div>';
  });
  html += '</div>';
  $('body').append(html);
  console.log(html);
});
</script>

<body>
</body>

</html>

edited Apr 11, 2017 at 5:04

answered Apr 10, 2017 at 9:38

RITESH ARORA

4973 silver badges11 bronze badges

2 Comments

Rooter Over a year ago

how can I display 3 panel for each row. like this image i.imgur.com/FJSXA2o.png

RITESH ARORA Over a year ago

updated my answer , col-xs-3 is your answer with margin

Collectives™ on Stack Overflow

How to create Bootstrap panel based on JSON output

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related