【vte.cx入門】5.登録したデータを参照する：jQuery実践編

データ登録を行ったら、今度はそのデータを参照してみましょう。

ここではjQueryを利用したデータ参照の方法を以下に記します。

1.ajaxで登録データを取得する（GETリクエスト）

上記データをjQueryのajax通信を使用し、GETリクエストを実行します。

javascript

$.ajax({
	url: '/d/{uid}?f',
	method: 'get'
}).done(function(res) {
	alert('取得成功');
}).fail(function( jqXHR, textStatus, errorThrown ) {
	alert('取得失敗');
});

■リクエスト

param	値	例
url	取得先URL?f	/d/{uid}?f
method	GET

uidの取得方法

以下のURLを画面で開いてください。すると自分のuidが取得できます。
※uidを取得するにはログインが必要です。

https://{自分のサービス}/d/?_uid

レスポンス

{'feed': {'title': (uid)}}}

取得したuidをurlに使用してください。

URLパラメータ

URLにパラメータを付与することで、様々な検索ができるようになります。
・パラメータ一覧

param	値
?f	一覧取得	url配下のデータ一覧を取得する。
?e	自身取得	urlのデータ1件を取得する。
?x	XML変換	データをXML形式で取得する。

その他詳しいパラメータの説明はこちらをご覧ください。条件検索について

■レスポンス

ステータス

ステータス	メッセージ	レスポンス
200	OK	feed形式のデータ一覧
204	No entry	（空）

204 No entryの場合は、取得先の配下に何も登録されていない状態です。
/d/{uid}にデータを登録してみましょう。（データ登録方法）

その他のエラーの場合、以下の仕様書の下部に細かく記載されています。
HTTPステータス一覧

2.?fパラメータで取得したデータ内容を確認する

?fパラメータを使用しajaxで取得したデータは以下のような内容になっていると思います。

{
  feed: {
    entry: [
      {
        userinfo: {
          id: 12345,
          email: [e-mail]
        },
        favorite: {
          food: 'りんご',
          music: 'J-POP'
        },
        id: '/{uid}/1-1-23-23123, 1'
      },
      {
        userinfo: {
          id: 98765,
          email: [e-mail]
        },
        favorite: {
          food: 'バナナ'
        }
        id: '/{uid}/1-1-23-098123, 1'
      }
    ]
  }
}

このように?fを指定するとURLの配下にある複数のentryが取得できます。

3.?eパラメータで取得したデータ内容を確認する

一方で、?eパラメータを使用しajaxで取得したデータは以下のような内容になっていると思います。

リクエスト

javascript

$.ajax({
	url: '/d/{uid}?e',
	method: 'get'
}).done(function(res) {
	alert('取得成功');
}).fail(function( jqXHR, textStatus, errorThrown ) {
	alert('取得失敗');
});

レスポンス

{
  feed: {
    entry: [
      {
        link: [{
          ___href: '/{uid}',
          ___rel: 'self'
        }],
        id: '/{uid},1'
      }
    ]
  }
}

?eパラメータを指定するとURL自身のentryが取得できます。

4. HTML(JavaScript)によるデータ参照

取得したデータは既存のJSON形式と同じです。
以下のように値を参照できます。

javascript

var name = feed.entry[0].favorite.food
console.log('food : ' + food);

コンソール

food : りんご

以上でデータの取得方法の説明を終わります。

次回はデータの更新方法について記述いたします。