Firebase Realtime databaseからのデータ取得について (child_addedについて)

Question

Realtime databaseからのデータ取得について、child_addedイベントの呼び出しタイミングがいまいち理解できません。

サンプルで下記のような①社員名と②所属部署を入力するだけの簡単なアプリを作りました。

  <h1>SampleProject for Firebase</h1>

  <div>
    <form>
      <div class="form-group">
        <label for="name">氏名：</label>
        <input type="text" class="form-control" id="name" placeholder="Name">
      </div>
      <div class="form-group">
        <label for="group">所属：</label>
        <input type="text" class="form-control" id="group" placeholder="Group">
      </div>
      <button type="submit" class="btn btn-primary btn-block register">登録</button>
    </form>
  </div>

  <div>
    <ul class="list">
      <li class="list_item"></li>
    </ul>
  </div>

// 1. データの登録
const registerData = (name, group) => {
  const userInfo = {
    name,
    group,
    createdAt: firebase.database.ServerValue.TIMESTAMP,
  }
  firebase.database().ref('users').push(userInfo);
  console.log('データの登録処理が行われました');
};

// 2. データが追加された際のリスナー (リスナーを登録する関数)
const getData = () => {
  $('.list_item').empty();
  const userData = firebase.database().ref('users').orderByChild('createdAt');
  userData.off('child_added');
  userData.on('child_added', (userSnapshot) => {
    const userId = userSnapshot.key;
    const snapData = userSnapshot.val();
    addUser(userId, snapData);
  });
};

// HTML要素の挿入
const createUserListItem = (userId, snapData) => {
  const $list_item = $('.list_item').clone();
  $list_item.text(snapData.name);
  $list_item.attr('id', `user-id-${userId}`);
  return $list_item;
}
const addUser = (userId, snapData) => {
  const $list_item = createUserListItem(userId, snapData);
  $list_item.appendTo('.list');
};


getData();

// データ登録処理の呼び出し
$('.register').on('click', (e) => {
  e.preventDefault();

  const name = $('#name').val();
  const group = $('#group').val();

  registerData(name, group);

  $('#name').val('');
  $('#group').val('');
});

単純に、社員を登録していけば1件ずつ<li>タグに囲まれた社員名を画面上に表示させていきたいのですが、例えば3件データを入力すると、2件目以降のデータが何回も<li>タグで表示されてしまいます。。。(下記に実行結果の画像リンクを貼り付けます)

リンク内容

とうぜんfirebaseの公式docもみたのですが、いまいち腹落ちせず、どなたか答えをお教えいただければ幸いです。
よろしくお願いいたします。

Answer 1

firebaseの問題ではなくjQueryの使い方の問題だと思います。
以下のコードを考えてみてください。

<p>バグ再現</p>
<button id="test">何回かクリック！</button>
<ul class="list">
  <li class="list_item"></li>
</ul>

$('.list_item').empty();
$('#test').on('click', () => {
  const $list_item = $('.list_item').clone();
  $list_item.text(`test text ${~~(Math.random()*100)}`);
  $list_item.appendTo($('.list'));
});

バグ再現確認

バグの再現に$('.list_item').empty();は要らないのですが、おそらく質問者さんの期待と違う動きをしていると思ったので付けておきました。chrome devtoolsのelementタブなどで、どのようにDOMが変化するかご確認ください。

Comments

[Kotolog_shun]

なるほど！やっと理解できました。これでは.list_itemが倍ずつ増殖してしまいますね。。。
たいへん助かりました。ありがとうございます！