Create dynamic row / column structure using Javascript

Question

I am attempting to add an RSS feed section to my website. I want each story to be stored in a Bootstrap column of width 3. I am attempting to add a row at the start of every 4th element and then closing the row on the next 4th element. However at the moment I seem to be running into problems with it prematurely cutting off the rows and ruining the formatting.

Below is my JS and a screenshot of my problem.

var rssfeed = new google.feeds.Feed("http://www.residentadvisor.net/xml/rss_news.xml");
//rssfeed.setResultFormat(google.feeds.Feed.XML_FORMAT);
rssfeed.setNumEntries(10);
rssfeed.load(showEntries);

console.log(rssfeed);

function showEntries(result) 
{
    if (!result.error)
    {
        var feeds = result.feed.entries;
        console.log(feeds);
        var rssoutput = "";
        for (var i=0; i<feeds.length; i++) 
        {
            if (i%4 == 0) {
                rssoutput += '<div class="row">';
            }
            rssoutput += '<div class="col-md-3">';
            rssoutput += '<h3><a href="' + feeds[i].link + '">' + feeds[i].title + '</a></h3><br />';
            rssoutput += '<p>' + feeds[i].content + '</p><br/>';
            rssoutput += '<i><p>' + feeds[i].publishedDate + '</p></i><br />';
            rssoutput += '</div>';

            if (i != 0 && i%3 == 0) {
                rssoutput += '</div>';
            }
        }

    document.getElementById("latest-news").innerHTML = rssoutput;
    }
}

cschaefer · Accepted Answer · 2016-01-29 15:04:43Z

1

Why do you need to have four per row?

Because bootstrap is responsive, you should be able to put all of the rss feeds in the same row and bootstrap will adapt.

rssoutput = '<div class="row">';
for (var i=0; i<feeds.length; i++)
{
  rssoutput += '<div class="col-md-3">';
  rssoutput += '<h3><a href="' + feeds[i].link + '">' + feeds[i].title + '</a></h3><br />';
  rssoutput += '<p>' + feeds[i].content + '</p><br/>';
  rssoutput += '<i><p>' + feeds[i].publishedDate + '</p></i><br />';
  rssoutput += '</div>';
}
rssoutput += '</div>';

You could also add col-xs-6 and col-sm-4 to the class to account for a smaller display.

rssoutput += '<div class="col-xs-6 col-sm-4 col-md-3">';

But that's all up to you.

answered Jan 29, 2016 at 15:04

cschaefer

1267 bronze badges

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

5 Comments

user2039981 Over a year ago

why not replacing all these rssoutput += with a +??

cschaefer Over a year ago

In JavaScript, the += operator is how you add onto a variable. If the variable is a string it appends to it, if the variable is a number it adds on to it. Otherwise the code would have to say rssoutput = rssoutput + 'whatever'.

user2039981 Over a year ago

I obviously know that, but I mean all lines but the first.

cschaefer Over a year ago

Oh, you mean why not just have it all on one line? Readability, it makes it easier to maintain.

user2039981 Over a year ago

You can do it like this: jsfiddle.net/gpa5b2eb, for real, learn JavaScript

Collectives™ on Stack Overflow

Create dynamic row / column structure using Javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related