LoginSignup
2
2

More than 5 years have passed since last update.

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

Posted at

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が読みやすくなると思います。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2