firebaseのデータを削除したい

Question

現在、google bools apiを用いた本の検索と気になる（保管）機能の実装したサイトを制作しております。

現状できていること）
・検索を押して本を表示させること
・気になるボタンを押して、firebaseにidとtitleを保管すること
・気になるボタンのクリックイベントで画面上にはapi内のタイトルを気になるリストに表示する。firebaseにはapi内のタイトル・idデータを保管する

やりたいこと）
・削除ボタンを押して、api内のタイトルをリストから削除し、firebaseからはtitleとidを削除する

上記のやりたいことにおいて、下記のように書いているのですがうまく実行されません。
アドバイスを頂けると助かります。
よろしくお願いいたします。

Javascriptの該当箇所は
//IDとtitleを削除するの部分です。

itemsの中身↓

tems: Array(10)
　0:
　accessInfo: Object
　etag: "q1pOLjF+ueM"
　id: "peklNwAACAAJ"
　kind: "books#volume"
　saleInfo: Object
　searchInfo: Object
　selfLink: "https://www.googleapis.com/books/v1/volumes/peklNwAACAAJ"
　volumeInfo: Object
　　allowAnonLogging: (...)
　　authors: （．．．）canonicalVolumeLink: (...)
　　contentVersion: (...)
　　description: （．．．）
　　industryIdentifiers: (...)
　　infoLink: (...)
　　language: (...)
　　maturityRating: (...)
　　pageCount: (...)
　　previewLink: (...)
　　printType: (...)
　　publishedDate: (...)
　　readingModes: (...)
　　title: "、○○○○"

firebaseの画面
https://gyazo.com/9175a548479d93567ca6e419d1cc7941

<div class="menu-content">
            <ul>
                <li>
                　<p>気になるリスト</p>
                </li>
                  <li v-for="booksFav in booksFavs">
                    　{{booksFav.title}}
                    　<button v-on:click="removeFavorite(item.id,item.volumeInfo.title)" class="btn btn-light">削除</button>
                  </li>
            </ul>
        </div>
    　　</div>
          <div class="book_wrapper">
            <div class="book_card" v-for="item in items">
              <div class="row no-gutters">
                <div class="col-md-4">
                  <img class="card-img" v-bind:src="item.volumeInfo.imageLinks?.thumbnail" />
                </div>
            　　

/* jshint curly:true, debug:true */
/* globals $, firebase */

const vm = new Vue({
  el: '#app',
  data() {
    return{
      query:'',
      items:[], //#apiから取得したデータを格納
      booksFavs:[]
    };
  },
  methods:{
    getResult(query){
      axios.get("https://www.googleapis.com/books/v1/volumes?q=search" + query).then(response => {
        console.log(response.data);
        this.items = response.data.items;
        const bookDate =response.data?.items?.volumeInfo?.imageLinks?.thumbnail;
          if(typeof bookDate == "undefined") {
          console.log("未定義です。");
          }
          firebase.database().ref('my-key/').on('value', snapshot => {
            if (snapshot) {
             const bookList = snapshot.val();
             let  booksFavs = [];
            // snapshotで最新状態を取得する
            console.log(snapshot.val());
            // データオブジェクトを配列に変更する
              Object.keys(bookList).forEach((val, key) => {
                bookList[val].id = val;
                booksFavs.push(bookList[val]);
                 });
            this.booksFavs = booksFavs;
            }
          });
      });
    },
    addFavorite(setId,setTitle) {
      //気になるボタンの本のIDとtitleを取得する
      let setDatas = {
        id    : setId,
        title : setTitle
      };
      //IDとtitleをfirebaseに登録する
      firebase
        .database()
        .ref('my-key')
        .push(setDatas);
    },
     //IDとtitleを削除する
    removeFavorite(removeId,romoveTitle) {
      let removeDatas = {
        id    : removeId,
        title : romoveTitle
   };
      firebase
        .database()
        .ref("my-key")
        .find(removeDatas)
        .remove();
    }
  }
});

Answer 1

firebase databaseのpushしたデータの検索と削除はかなり面倒です。
pushはランダムに生成されたkeyでデータが作成されるので、keyをパスにして探すことができません。
データを保存したパスを全探索して対象のidを持つデータを見つけるしかないです。

// removeId を持つデータを削除する
  let ref = firebase.database().ref('my-key');
  // onceコールバック関数で、ref中のデータを1回だけ全探索する
  ref.once('value', ss => {
    // ss(DataSnapshot)はforEachが使える
    ss.forEach( function(v){
      // v の中身はkeyがランダムに生成された値で、valueが {id, title}のオブジェクト
      // val関数でvalueを取得し、removedIdと比較する
      if(v.val().id == removedId){
        // データを削除する際はkeyからrefを取得し、ref.remove()する。
        console.log(v.ref.remove());
      }
    });
  });

ReferenceとDataSnapshotの機能はよく読んでおいた方が良いと思います。
https://firebase.google.com/docs/reference/js/firebase.database.Reference
https://firebase.google.com/docs/reference/js/firebase.database.DataSnapshot#foreach
データの探索方法は一応公式チュートリアルに説明があります（削除方法まで書いていない...）
https://firebase.google.com/docs/database/admin/retrieve-data?hl=ja

Comments

[tamaharu31]

ご回答ありがとうございます。
下記のように修正しました。
しかし、「Cannot read property 'id' of undefined」のエラーが出てしまします。
こちらの原因はデータの指定の仕方が間違っているのということでしょうか？
よろしくお願いいたします。

//IDとtitleを削除する
removeFavorite(removeId,removeTitle) {
let ref = firebase.database().ref('my-key');
// onceコールバック関数で、ref中のデータを1回だけ全探索する
ref.once('value', ss => {
// ss(DataSnapshot)はforEachが使える
ss.forEach( function(v){
// v の中身はkeyがランダムに生成された値で、valueが {id, title}のオブジェクト
// val関数でvalueを取得し、removedIdと比較する
if(v.val().id == removeId){
// データを削除する際はkeyからrefを取得し、ref.remove()する。
console.log(v.ref.remove());
}
if(v.val().title == removeTitle){
// データを削除する際はkeyからrefを取得し、ref.remove()する。
console.log(v.ref.remove());
}
});
});

[hope_mucci]

登録しているデータの状況まで見ることはできませんので、ssの中身やv.val()の中身をconsole.log確認してみてください。少なくとも私は質問文と同じaddFavoriteで登録したデータを回答の方法で削除できています。