爆速JSONP / mustacheで深い要素を指定する方法

2527 ワード
YOLP mustache yahoo ydnjp api api テキストリンク

http://groups.yahoo.co.jp/group/YJDN/message/447
への返答になります。

爆速JSONPを使って気象情報APIを利用しようと考えているのですが、レスポンスの扱いがよく分からず困っています。フィールドWeatherListの中身がリストになっており(要素はWeatherというフィールド)、それぞれのWeatherの中身を表示させるには、
YDF.Feature.Property.WeatherList.
以降どのように記述すれば良いのでしょうか?
Mustacheのマニュアルを見てもよく分かりませんでした。
迷惑をかけてしまい、申し訳ありません。

Mustache.jsの指定は、要素順を間違えずに書く必要があります。間違えても特にエラーなどが出ず、何も出力されないだけなのでわかりにくいのですが。。

APIのレスポンスを整形して見てください。
Weatherの一番目の要素をルートからたどると

//JSON Path表記
$.Feature[0].Property.WeatherList.Weather[0]

のようになっているはずです。途中、配列になっている箇所も間違いなく指定しなければなりません。
配列の添え字に関しても、Mustache.jsではドットつなぎで指定できます。
↓のような感じでどうでしょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>weather</title>
</head>
<body>
<script src="http://i.yimg.jp/images/yjdn/js/bakusoku-jsonp-v1-min.js"
  data-url="http://weather.olp.yahooapis.jp/v1/place"
  data-p-appid="test"
  data-p-output="json"
  data-p-coordinates="139.732293,35.663613"
>
<ul>
{{#Feature.0.Property.WeatherList.Weather}}
 <li>
  <ul>
   <li>type: {{Type}}</li>
   <li>date: {{Date}}</li>
   <li>rainfall: {{Rainfall}}</li>
  </ul>
 </li>
{{/Feature.0.Property.WeatherList.Weather}}
</ul>
</script>
</body>
</html>

爆速JSONPにもデバッグモードと言う名目でJSONをダンプする機能がありますが、大して高機能ではありません。

Google ChromeやFirefoxであればJSON Viewなどの拡張機能をインストールして併用するか、Unixコマンドラインであればjqを使うとJSONが読みやすくなると思います。