Create Bootstrap grid with JS loop

Question

I'm looking to iterate a JSON array and print the results inside a row (3 equal columns). The actual method don't respect the logic behind bootstrap, so how can I tell JS to include only 3 elements then clone a similar div. Here's a runnable code so you can have a feel of the issue. Should be viewed on large screens. Thanks.

var url = "https://api.openaq.org/v1/countries?order_by=count&sort=desc";

  $.getJSON(url, function (data) {

    $.each(data.results, function(i, result) {
      $('#data').append(
          $('<h2>').text(result.name),
          $('<div>').text("Code = " + result.code),
          $('<div>').text("Score = " + result.count),
          $('<hr>').text("  "),
        );
    });

  });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container">

    <h1></i>Open, real-time and historical air quality data</h1> 

    <hr>


    <div class="row" style="background-color: #ddd">
    <div class="col-md-4" id="data" style="background-color: #fe8000" ></div>
    </div>

    <h6 style="padding-bottom: 25px">Source: This data is licensed under the Creative Commons Attribution 4.0 Generic License. It is attributed to OpenAQ. 
    The software is licensed as below with The MIT License.</h6>

</div> 

<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>

you want a table grid with 3 columns printing the data from json and clone this single row to appending and display remaining json data. — Chaitanya Ghule
– Chaitanya Ghule, Commented Aug 23, 2017 at 21:42
@ChaitanyaGhule You mean clone in JS? because in HTML is not working. — Blacksun
– Blacksun, Commented Aug 23, 2017 at 21:45
not cloning exactly but just similar to copy html markup (tr) for first row and display remaining data in next consecutive rows @Blacksun — Chaitanya Ghule
– Chaitanya Ghule, Commented Aug 23, 2017 at 21:47
It's not working because your putting them all inside a single "col-md-4", you of course need 3.. — Keith
– Keith, Commented Aug 23, 2017 at 21:49
@Keith I tried creating 3 different md-4 in a single row. Also, in multiple rows. — Blacksun
– Blacksun, Commented Aug 23, 2017 at 21:50

Keith · Accepted Answer · 2017-08-23 22:08:08Z

2

Here is your code slightly modified to do your 3 columns.

Please note, you had some extra colouring in there. I removed because it didn't look very nice. That's because ideally full height div's would look better. In some respects not using twitters grid system and using flexbox might give better results.

Please note you will need to go into fullscreen with this snippet, or you wont see the 3 columns for obvious reason. That or change the col-md-4 to col-xs-4..

var url = "https://api.openaq.org/v1/countries?order_by=count&sort=desc";

  $.getJSON(url, function (data) {

    $.each(data.results, function(i, result) {
      $('#data').append(
          $('<h2 class="col-md-4">').text(result.name),
          $('<div class="col-md-4">').text("Code = " + result.code),
          $('<div class="col-md-4">').text("Score = " + result.count),
        );
    });

  });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container">

    <h1></i>Open, real-time and historical air quality data</h1> 

    <hr>

    <div class="row" style="background-color: #ddd" id="data" style="background-color: #fe8000">
    </div>

    <h6 style="padding-bottom: 25px">Source: This data is licensed under the Creative Commons Attribution 4.0 Generic License. It is attributed to OpenAQ. 
    The software is licensed as below with The MIT License.</h6>

</div> 

<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>

answered Aug 23, 2017 at 22:08

Keith

24.4k2 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Blacksun Over a year ago

Thanks a lot! Actually, I'm tweaking your code to print h2, p, etc.. in one col-md-4 not create a table like you've done.

Blacksun Over a year ago

do you have any idea on how to add html tag in js function? something like: $('<div class="col-md-4">').text(result.name + '<br>' + '<h2>' + "Code = " + result.code + '<br>' + "Score = " + result.count)

Keith Over a year ago

You can use the html setter, instead of the text one.. eg..

$('<div class="col-md-4">').html(result.name + '<br>' + '<h2>' + "Code = " + result.code + '<br>' + "Score = " + result.count)

Chaitanya Ghule · Accepted Answer · 2017-08-23 22:11:16Z

View output of following code on screen width >= 992px;

I have not used table to create a grid consisting of 3 columns in each row instead used div (as in your case).

Just created dynamic div with class col-md-4 and displayed each data from json response and appended it to current div#data.

let url = "https://api.openaq.org/v1/countries?order_by=count&sort=desc";

$.getJSON(url, function(data) {

  $.each(data.results, function(i, result) {
	let divContent = '<h2>'+result.name+'</h2>'+
						'<div>'+result.code+'</div>'+
						'<div>'+result.count+'</div>';
	let div = "<div class='col-md-4 col-sm-4' data-idx="+i+">"+divContent+"</div>";
    
	$('#data').append(div);
  });

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>Open, real-time and historical air quality data</h1>
  <hr>
  <div class="row" style="background-color: #ddd">
    <div class="col-md-12" id="data" style="background-color: #fe8000">         </div>
  </div>
  <h6 style="padding-bottom: 25px">
		Source: This data is licensed under the Creative Commons Attribution 4.0 Generic License. It is attributed to OpenAQ.The software is licensed as below with The MIT License.
	</h6>
</div>

Hope, this works for you. :)

Blacksun · Accepted Answer · 2017-08-23 22:57:01Z

This version print separate mid-col-4 with some infos from the API request:

  var url = "https://api.openaq.org/v1/countries?order_by=count&sort=desc";

$.getJSON(url, function (data) {

  $.each(data.results, function(i, result) {
    $('#data').append(
      $('<div class="col-md-4" style="padding: 30px; border-top: 1px solid #F6F6F6">').html
      ('<h2>' + result.name + '</h2>' + "Code = " +  result.code + '<br>' + "Score = " + result.count),
  );

  });


});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>Open, real-time and historical air quality data</h1>
  <hr>
  
<div class="row" id="data"></div

  <h6 style="padding-bottom: 25px">
		Source: This data is licensed under the Creative Commons Attribution 4.0 Generic License. It is attributed to OpenAQ.The software is licensed as below with The MIT License.
	</h6>
</div>

Collectives™ on Stack Overflow

Create Bootstrap grid with JS loop

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related