How to populate bootstrap grids using Jquery and JSON?

Question

I have made a NEWS website it consists of 3x4 grids. I want to populate these grids with NEWS title, description, image, etc. I am not able display anything on my website.

HTML code:

<div class="Article">
    <div class="col-md-4" title="News">
        <h3></h3>
        <p></p>
    </div>
    <div class="col-md-4" title="News">
        <h3></h3>
        <p></p>
    </div>
    <div class="col-md-4" title="News">
        <h3></h3>
        <p></p>
    </div>
</div>
<div class="Article">
    <div class="col-md-4" title="News">
        <h3></h3>
        <p></p>
    </div>
    <div class="col-md-4" title="News">
        <h3></h3>
        <p></p>
    </div>
    <div class="col-md-4" title="News">
        <h3></h3>
        <p></p>
    </div>
</div>
<div class="Article">
    <div class="col-md-4" title="News">
        <h3></h3>
        <p></p>
    </div>
    <div class="col-md-4" title="News">
        <h3></h3>
        <p></p>
    </div>
    <div class="col-md-4" title="News">
        <h3></h3>
        <p></p>
    </div>
</div>
<div class="Article">
    <div class="col-md-4" title="News">
        <h3></h3>
        <p></p>
    </div>
    <div class="col-md-4" title="News">
        <h3></h3>
        <p></p>
    </div>
    <div class="col-md-4" title="News">
        <h3></h3>
        <p></p>
    </div>
</div>
</div>

JS code:

$(document).ready(function() {
var news_source =["the-times-of-india","business-insider","techcrunch","bbc-sport"];
    for(var i=0;i<news_source.length;i++){
    $.getJSON('https://newsapi.org/v1/articles?source='+ news_source[i] +'&sortBy=top&apiKey=my-api-key',function (json) {
    console.log(json);

    for(var j=0;j<3;j++){
        $(".Article News h3").eq(j).html(json.articles[j].title);
        $('.Article News p').eq(j).html(json.articles[j].description);
    }

    });

    }
});

I am not able to display any data using JSON I have made array of website sources i.e news_sources[] because each source returns 4 to 5 objects so that I can display it in grids, in total I have made 12 grids. I want to display Business NEWS in first row, sports NEWS in second row, tech NEWS in third row and so on in grid system that's why I have made array of news_sources[] to display articles from different web sources.

JSON data:

Website Layout:

are you parsing the json to an object ? What is the result of the console log ? Also you are overwriting i in your selcond for loop, you should change one of them from i to something else. — Pogrindis
– Pogrindis, Commented Jun 26, 2017 at 14:27
Why not build the grid's markup as you loop (instead of finding and loading) and then append the markup once? — Mikey
– Mikey, Commented Jun 26, 2017 at 14:34
@Pogrindis I have edited the question please have a look, did you got my question. Am I doing something wrong in jquery code. — rock stone
– rock stone, Commented Jun 26, 2017 at 14:35
@Mikey I have edited the question please have a look, I want to display NEWS articles on my website I think I am doing something wrong in Jquery code. — rock stone
– rock stone, Commented Jun 26, 2017 at 14:37
@Mikey I just want to display description of NEWS in <p> tag and title of NEWS in <h3> tag. — rock stone
– rock stone, Commented Jun 26, 2017 at 14:43

Christian4423 · Accepted Answer · 2017-06-26 15:59:42Z

1

Okay... Take a look at the HTML first. I have no way of testing this code but you will want something to this affect.

var news_source = ["the-times-of-india", "business-insider", "techcrunch", "bbc-sport"];
$(function() {
  // get the articles
  var $sections = $("[data-place=article]");
  // get the max-length
  var sec_len = $sections.length;
  // set for accessing the right section.
  var sec_count = 0;
  // gets all the sections, this should be a promise
  for (var i = 0; i < news_source.length; i++) {
    // i made this into a string
    var get_string = 'https://newsapi.org/v1/articles?source='+news_source[i]+'&sortBy=top&apiKey=my-api-key';
    $.getJSON(get_string, function(json) {
      sec_count++;
      // there is no more room
      if (sec_count === sec_len) {
        return false;
      } else {
        for (var j = 0; j < json.length; j++) {
          var section = makeSection(); // returns div
          var header = makeHeader(json.articles[j].title, "3"); // returns header
          var paragraph = makeParagraph(json.articles[j].description); // returns paragraph
          section.append(header); // attach header
          section.append(paragraph); // attach para
          $sections.eq(sec_count).append(section); // append to document
        }
      }
    });
  }
});

function makeSection() {
  return $("<div />", {
    "class": "col-md-4",
    "title": "news"
  })
}

function makeHeader(string, size) {
  return $("<h" + size + " />", {
    "text": string
  });
}

function makeParagraph(string) {
  return $("<p />", {
    "text": string
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Article" data-place="article"></div>
<div class="Article" data-place="article"></div>
<div class="Article" data-place="article"></div>

edited Jun 26, 2017 at 15:59

answered Jun 26, 2017 at 15:52

Christian4423

1,8072 gold badges16 silver badges26 bronze badges

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

6 Comments

rock stone Over a year ago

Thanks for giving detailed solution.

rock stone Over a year ago

I am new to web development I want to ask you should I always dynamically create elements when needed or should i populate them later, which one is good practice to follow.

Christian4423 Over a year ago

No problem, just a quick note. You have in your string, "mu-api-key" storing the API key in the string is unsecured. Anyone who uses your site will be able to see the key. If you have access to the BE, I would have that get this data for you. And you would make a call to your server to get the data.

rock stone Over a year ago

@Christain4423 No I am not storing api key as string I am passing it instead of my-api-key. How can I encapsulate it then ?

Christian4423 Over a year ago

@rockstone dynamically creating elements is a good idea for JSON data in an async program. This keeps it light weight. This is not a good idea for page load though. But if you have access to the back end, you can have the server render HTML and you can have your front end javascript throw in the returned HTML.

|

Collectives™ on Stack Overflow

How to populate bootstrap grids using Jquery and JSON?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related