質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

1623閲覧

外部APIトークンにアクセスしてJSONデータを取得する方法

halwo

総合スコア11

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2018/02/15 17:43

編集2018/02/16 04:03

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/02/15 17:46

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「JSONデータの構造」「特定の項目」「それ以上」を具体的に提示してください。
halwo

2018/02/16 02:37 編集

ご指摘大変ありがとうございました。きちんと伝わるように改善できたかわかりませんがよろしくお願いします。
kei344

2018/02/16 04:11

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。
halwo

2018/02/16 04:47

失礼いたしました。
guest

回答1

0

ベストアンサー

ご質問の意図としては、
0. JSONのとり方がわからない
0. やり方はわかるがエラーになる
0. データは取れているが抽出の仕方がわからない

のどれでしょうか?
ざっと見た感じ、JSONデータに1箇所問題があります

"name": "亜いウ江お"

の後ろにカンマがないと構造がおかしいです

またjsonを受け取ったあとのアンカー作成の処理を見ても
「path」にあたる情報がJSONデータの中に無いですね

投稿2018/02/16 03:04

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

halwo

2018/02/16 04:54

ありがとうございます。 質問の意図はJSONのとり方がわからないになります。 自分でもどうお伝えしたらよいのか難しいのですが、主な不明点はトークンキーとAPIのURLをどう扱ったらアクセスできるのか、ネストになっているJSONの"image"、"title"の情報を抜き出すにはどのようなプログラムが必要なのかになります。 JSONデータに「path」はないのですが、titleと同じ階層にある前提ということでお願いいたします。 "name": "亜いウ江お"の後ろにカンマがないのは私のミスでした。申し訳ございません。
yambejp

2018/02/16 04:58 編集

> JSONのとり方がわからない ということでしたら単純にURLを指定してやることです なお、外部サイトからの読み込みであれば 大抵のサイトはクロスオリジン制限をかけているので よみこみエラーになると思います
yambejp

2018/02/16 07:43

$.getJSON()の第一引数に命題のURLを指定してあげて下さい。 繰り返しになりますが、おそらくクロスオリジン制限の 「読み込みエラー」になると思います
halwo

2018/02/19 01:31

解決にはいたりましせんでしたが、ご協力いただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問