airtableからjsonでデータを取得、表示したい

Airtableのデータをjsonで取得して、
Weeblyのページにhtmlで表示したいと思っています。

まずは『データをjsonで取得』を実現しようと、以下のhtmlファイルを作成しました。
IEのF12でコンソールを確認したのですが、jsonがうまく取得できず、表示されません…

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Document</title>
6    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>  
7    <script src="js/info.js"></script>
8</head>
9<body>
10<script>
11jQuery.ajax({
12    url: "jsonデータのURL",
13    type: "GET",
14    data: {
15        "view": "Main View", 
16        "limit": "10",
17        "offset": "",
18        "sortField": "Name",
19        "sortDirection": "asc",
20    },
21    headers: {
22        "Authorization": "APIkeyを入力",
23    },
24})
25.done(function(data, textStatus, jqXHR) {
26    console.log(data);
27})
28</script>
29</body>
30</html>

なお、以下のサイトを参考にしています。
・Airtableのapi（json型）をajaxで取得する。（備忘録）
リンク内容
・Airtable APIを使ってHTML側に表示させよう。その３
リンク内容

どなたか、お知恵を貸していただけると嬉しいです。よろしくお願いします(>_<)

退会済みユーザー

2018/11/02 16:45

誤回答して、すみませんでした。コンソールにエラーなどは表示されていませんか？

romini

2018/11/06 07:44

IEのコンソールには以下のように表示されており、エラーの内容がよくわかりませんでした…。 DOM7011: このページのコードによって、バックワードキャッシュとフォワードキャッシュが無効になりました。詳細については、http://go.microsoft.com/fwlink/?LinkID=291337 を参照してください。 HTML1300: ナビゲーションが発生しました。そこで、Chromeで試したところ、以下のエラーが確認できました！ api.airtable.com/v0/appbNp9bNKJdDExVy/Scenario?view=Main+View&limit=10&offset=&sortField=Name&sortDirection=asc:1 GET https://api.airtable.com/v0/appbNp9bNKJdDExVy/Scenario?view=Main+View&limit=10&offset=&sortField=Name&sortDirection=asc 422 (Unprocessable Entity)

行動規範の内容に同意します

回答1件

ベストアンサー

回答概略

dataのプロパティを、Airtable APIのドキュメントを元に、適切な値に修正してください。

回答詳細

通信時に「422 Unprocessable Entity」エラーが発生しています。これにより、JSONの取得ができていません。

422エラーは、送信しているデータの形式に問題はないが、内容に問題があるときに返されることがあるエラーです。今回の場合、dataのプロパティに問題があるため、発生していると思われます。

質問者がAPIのどの機能を使用しようとしているか不明ですが、Airtable APIのドキュメントを読むと、いずれの機能にも、使用可能なリクエストパラメータにlimit offset sortField sortDirectionがありません。（代わりにmaxRecordsと、[{field: "Name", direction: "desc"}]のような値をとるsortがあります。）

ですので、試しに以下のdataで通信してみてください。他に問題がなければ、おそらく正常にJSONを取得できると思います。

JavaScript
1data: {
2  "view": "Main View", 
3}

なお、質問者が参考サイトとして上げている情報ですが、最終更新日が1年以上前となっています。情報が古いため、現在のAPIでは適用できない情報なのかもしれません。

以下は、回答当初に行った誤りを含む回答です。
1.10.2は、1.5より新しいバージョンのため、以下の回答は意味をなしません。
ただ、念のため残しておきます。

~~jQuery 1.10.2を使用していますが、done()メソッドを使用できるのは、jQuery 1.5以上です。そのため、コードが正常に動作していないと思われます。~~

~~jQuery 1.10.2でajax通信を行うのであれば、done() fail()の代わりに、success errorプロパティで処理を行ってください。~~

JavaScript
1$.ajax({
2    url: "jsonデータのURL",
3    success: function(data, textStatus, jqXHR){
4        console.log(data);
5    },
6    error: function(){
7    }
8});