田無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": "高橋周平"}} というデータを持っているとき、

equalTo以外での検索の例として、年齢で範囲指定したい場合、 .../person.json?orderBy="age"&startAt=開始数&endAt=終了数 といったようなクエリで検索できる