田無rb#7 ~Nuxt.js firebase連携③~
今回も「Vue.js&Nuxt.js超入門」Chapter6の続きをやっていきます
前回は全てのJSONデータを表示できるようになったので、今回は特定の値を取り出してみる
https://[プロジェクトID].firebaseio.com/person/[キー].json
というURLにアクセスすれば該当キーのデータを取得できる
キー指定での検索はできるようになったが、それだけでは不便なので Firebase 側にインデックスを設定して様々な検索を行えるようにする
上記リンクに記載されている .indexOn
の設定を行う。この設定を行うことで、値の並び替えと検索ができるようになるらしい
設定を行い、ソースコードのJSONデータを取得する部分のURLを以下のように修正する
https://[プロジェクトID].firebaseio.com/person.json?orderBy="$key"&equalTo="検索テキスト"
各クエリについて
orderBy="$key"
... どの項目でデータを並び替えるかを指定する。検索を行う際に必ず指定しなければならず、指定した値が検索項目となる(ここではキーを検索項目とする。キーは$をつけて$key
と表す)equalTo="検索テキスト"
... orderByで指定した項目の値(ここではキー)と検索テキストが一致したものを取り出す
ここではキーを指定しているので、記事冒頭の検索と違いがないように見えるが、得られるデータに差異がある
{ "s.takahashi@example.com": {"age": 25, "name": "高橋周平"}}
というデータを持っているとき、
.../person/[キー].json
で検索した場合、値の部分({"age": 25, "name": "高橋周平"}
)のみ取得する.../person.json?orderBy="$key"&equalTo="検索テキスト"
で検索した場合、キーを含めたものを取得する
equalTo以外での検索の例として、年齢で範囲指定したい場合、 .../person.json?orderBy="age"&startAt=開始数&endAt=終了数
といったようなクエリで検索できる