質問: Airtableのデータをjsonで取得して、 Weeblyのページにhtmlで表示したいと思っています。 まずは『データをjsonで取得』を実現しようと、以下のhtmlファイルを作成しました。 IEのF12でコンソールを確認したのですが、jsonがうまく取得できず、表示されません... ``` Document ``` なお、以下のサイトを参考にしています。 ・Airtableのapi(json型)をajaxで取得する。(備忘録) リンク内容 ・Airtable APIを使ってHTML側に表示させよう。その3 リンク内容 どなたか、お知恵を貸していただけると嬉しいです。よろしくお願いします(>_<)
回答: ###### 回答概略 `data`のプロパティを、Airtable APIのドキュメントを元に、適切な値に修正してください。 ###### 回答詳細 通信時に「422 Unprocessable Entity」エラーが発生しています。これにより、JSONの取得ができていません。 422エラーは、送信しているデータの形式に問題はないが、内容に問題があるときに返されることがあるエラーです。今回の場合、`data`のプロパティに問題があるため、発生していると思われます。 質問者がAPIのどの機能を使用しようとしているか不明ですが、Airtable APIのドキュメントを読むと、いずれの機能にも、使用可能なリクエストパラメータに`limit` `offset` `sortField` `sortDirection`がありません。(代わりに`maxRecords`と、`[{field: "Name", direction: "desc"}]`のような値をとる`sort`があります。) ですので、試しに以下の`data`で通信してみてください。他に問題がなければ、おそらく正常にJSONを取得できると思います。 ``` data: { "view": "Main View", } ``` なお、質問者が参考サイトとして上げている情報ですが、最終更新日が1年以上前となっています。情報が古いため、現在のAPIでは適用できない情報なのかもしれません。 以下は、回答当初に行った誤りを含む回答です。 1.10.2は、1.5より新しいバージョンのため、以下の回答は意味をなしません。 ただ、念のため残しておきます。 ~~jQuery 1.10.2を使用していますが、`done()`メソッドを使用できるのは、jQuery 1.5以上です。そのため、コードが正常に動作していないと思われます。~~ ~~jQuery 1.10.2でajax通信を行うのであれば、`done()` `fail()`の代わりに、`success` `error`プロパティで処理を行ってください。~~ ``` $.ajax({ url: "jsonデータのURL", success: function(data, textStatus, jqXHR){ console.log(data); }, error: function(){ } }); ``` ~~ただ、特に理由がなければ、新しいバージョンのjQueryを使用することをオススメします。 2018/11/2時点の最新バージョンは、3.3.1です。~~ ~~jQuery 1.10.2でajax通信を行うのであれば、`done()` `fail()`の代わりに、`success` `error`プロパティで処理を行ってください。~~