4

I want to load some JSON data from an external URL and display it in a block.

How do I go about that?

7

For the most basic solution, you would need to:

A more complex version of your custom module could for instance involve implementing hook_block_configure to make the URL configurable from the UI, using theme functions to generate the HTML output, and caching/storage of the return value.

A completely different approach, which may or may not be appropiate in your case, would be to use the Feeds module to retrieve the JSON and store the data as nodes, and use the Views module to generate a block listing those nodes.

2

Maybe too simple of an approach, but if all you truly want to do is display JSON data (no need to store it), then I'd add a new block as "Full HTML" and then add some JQuery.

To embed an HTML snippet it would be:

<script type="text/javascript">
(function ($) {
$(document).ready(function(){
  $('#remoteFeed').load('http://example.com/path/to/page #some-div-id');
});
})(jQuery);
</script><div id="remoteFeed"></div>

The method would be similar for JSON, only you'd have to do some formatting of the return that would be custom to your application.

Here's a working example pulled from JQuery.getJSON documentation customized ever so slightly to work inside a Drupal Block:

<script type="text/javascript">
(function ($) {
$(document).ready(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "awesome",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#flickr-images");
      if ( i == 3 ) return false;
    });
  });
});
})(jQuery);
</script>
<div id="flickr-images"></div>
2
  • pretty cool, thanks. The json doesn't change often so I might be better off storing or caching it, that should improve the load time – uwe Nov 5 '11 at 23:48
  • 1
    Not necessarily. Depends on whose server is faster: your server or the JSON resource? True, there will always be a delay when for JQuery to load after the document renders. If you decide to cache the result, a lightweight approach drupal way would be to use drupal_http_request as @marcvangend advised and store the result in a revisioned node for history. – Brent Nov 5 '11 at 23:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.