web-dev-qa-db-ja.com

外部URLからJSONを読み取ってブロックに表示する方法は？

外部URLからJSONデータをロードしてブロックに表示したいのですが。

どうすればいいですか？

7json
4
uwe

最も基本的なソリューションでは、次のことを行う必要があります。

カスタムモジュールのより複雑なバージョンでは、たとえば、 hook_block_configure を実装して、URLをUIから構成可能にし、テーマ関数を使用してHTML出力を生成します。戻り値のキャッシング/ストレージ。

完全に異なるアプローチは、あなたのケースでは適切かもしれないし、そうでないかもしれませんが、 Feeds モジュールを使用してJSONを取得し、データをノード、および Views モジュールを使用して、それらのノードをリストするブロックを生成します。

7
marcvangend

アプローチが単純すぎるかもしれませんが、本当にやりたいことがJSONデータを表示すること（それを格納する必要がない場合）であれば、新しいブロックを「完全なHTML」として追加してから、JQueryを追加します。

HTMLスニペットを埋め込むには、次のようにします。

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

メソッドはJSONでも同様ですが、アプリケーションに合わせてカスタマイズされた戻り値をフォーマットする必要があるだけです。

これは JQuery.getJSONのドキュメント から抜粋した実際の例です。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>
2
Brent