JSON-Powered Update Feed

By Ken Hawkins

feed news handlebars javascript Requires EBI Visual Framework 1.2.0, 1.3.0

If you need an easy way to consume JSON or RSS and show as a feed, here's the ticket.

Contribute a pattern

Have a great way of doing something, add it to the Style Lab. Here's how


Implementation code

Get a zip with all the sample HTML and any spaecial CSS or JS needed: Download a ZIP file More on how to use this

HTML
<div id="news-updates"><cite>Loading...</cite></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.8/handlebars.min.js"></script>



JS
var feedTemplate = '{{#each item}}'+
    '<div class="padding-top-medium">'+
      '<span class="label">{{pubDate}}</span>'+
      '<h6><a href="{{link}}" class="readmore">{{title}}</a></h6>'+
    '</div>'+
  '{{/each}}';

// feed processor
function feedImporter(feedUrl,template,destination){
  this.feedUrl = feedUrl;
  this.template = template;
  this.destination = destination;
}
feedImporter.prototype.init = function(){
  function queryData(properties) {
    $.ajax({
      // here we use YQL to translate the RSS into JSON, but you could easily pass in your JSON here
      url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22'+ encodeURIComponent(properties.feedUrl)+'%22limit%206&&format=json&diagnostics=false&_maxage=3600',
      template:    properties.template,
      destination: properties.destination
    }).done( function(data) {
      // here you need to map your JSON structure
      var mappedData = data.query.results,
          template = Handlebars.compile(properties.template);
      $(properties.destination).html(template(mappedData));
    });
  }
  queryData(this); // bootstrap
}
newsUpdates = new feedImporter("https://www.ebi.ac.uk/about/news/service.xml",feedTemplate, "#news-updates").init();