外部APIトークンにアクセスしてJSONデータ(ネストになっている)を取得、その中の特定の項目をJavascriptでhtml表示できるソースを作りたいのですが、造詣が浅くよくわかりません。
一番下のはサンプルソースは静的なJSONデータをhtml表示するものです。
こちらのサンプルソース改変して、上記のことを実装するためのご指南お願いいたします。
■APIトークンキーとURL
curl -X GET -H "Authorization: Token AAAAAAAAAAAAAAA" -H "Content-Type:application/json" https://XXXXXXXX.com/api/tags/123/BBB
■JSONデータのサンプル
※この中の"image"と"title"を取得したい。
{ "data": { "description": "亜いウ江おカ木くケ①さシ巣せソ他ちツ手②", "id": 123, "name": "亜いウ江お", "tags": [ { "description": "亜いウ江おカ木くケ①さシ巣せソ他ちツ手②", "id": 123 } ], "news": [ { "description": "亜いウ江おカ木くケ①さシ巣せソ他ちツ手②", "id": 12345, "published_at": "2018/02/04", "image": "http://XXX.com/image/a.jpg", "title": "亜いウ江おカ木くケ①さシ巣せソ他ちツ手②" } ] } }
■Javascriptのサンプル
<script> $(function(){ $.getJSON('sample.json', function(data){ for(var i in data){ var ul=$('<ul>').appendTo($('#news-list')); for(var i=0;i<data.length;i++){ $('<li>').append( $('<a>').attr('href',data[i]["path"]).append( $('<img>').attr({'src':data[i]["image"],'alt':''}) ,$('<span>').text(data[i]["title"]) ) ).appendTo(ul); } } }); }); </script> <div id="news-list"> </div>
回答1件
あなたの回答
tips
プレビュー