Comment lire JSON à partir d'une URL externe et l'afficher dans un bloc?

Question

Je veux charger des données JSON à partir d'une URL externe et les afficher dans un bloc.

Comment dois-je procéder?

Answer 1

Pour la solution la plus élémentaire, vous devez:

• Créez un module personnalisé;
• Implémentez hook_block_info et hook_block_view pour définir votre bloc (voir block_example.module pour des exemples);
• Lors de la génération du contenu du bloc, utilisez drupal_http_request pour récupérer les données json de votre URL et traiter la valeur de retour si nécessaire.

Une version plus complexe de votre module personnalisé pourrait par exemple impliquer l'implémentation hook_block_configure pour rendre l'URL configurable à partir de l'interface utilisateur, en utilisant des fonctions de thème pour générer la sortie HTML et la mise en cache/stockage de la valeur de retour.

Une approche complètement différente, qui peut ou non être appropriée dans votre cas, serait d'utiliser le module Feeds pour récupérer le JSON et stocker les données en tant que nœuds, et utiliser Vues module pour générer un bloc listant ces nœuds.

Answer 2

Peut-être une approche trop simple, mais si tout ce que vous voulez vraiment faire est d'afficher des données JSON (pas besoin de les stocker), alors j'ajouterais un nouveau bloc en "Full HTML" puis ajouterais JQuery.

Pour incorporer un extrait HTML, ce serait:

<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>

La méthode serait similaire pour JSON, seulement vous auriez à faire un formatage du retour qui serait personnalisé pour votre application.

Voici un exemple de travail tiré de documentation JQuery.getJSON personnalisé très légèrement pour fonctionner dans un bloc Drupal:

<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>