Повторение данных, отображаемых через Firebase с новым пользовательским вводом

Question

Когда пользователь заходит (пользователь 1) на мой веб-сайт, он отображает данные, а когда другой пользователь (пользователь 2) отправляет новые данные, он должен добавить одну новую запись внизу исходного списка. Однако, когда другой пользователь (пользователь 2) отправляет новый запрос, на странице отображается исходный список, за которым следует тот же список, повторенный после первоначального списка, но также и с новой записью.

Я хочу добавить только эту новую запись в конец списка, не повторяя снова. Я пытался следовать этому и пробовал решение, но оно не работает для меня: Прослушиватель событий Firebase child_added, возвращающий дублирующиеся данные

Пример:

---

Вступление 1

Вступление 2

Вступление 3

Новая запись сделана пользователем 2:

---

Запись 1

Вступление 2

Вступление 3

Вступление 1

Вступление 2

Вступление 3

Вступление 4

Что я хочу это сделать:

---

Запись 1

Вступление 2

Вступление 3

Запись 4

Фрагмент кода:

let jobsArray = [];
let i = 0;

var element;
var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
  snapshot.forEach(function(child) {
    var datas = child.val();
    var time = child.val().Scheduled_Time;
    var name = child.val().Name;
    var timeDriven = child.val().Time_Driven;
    var date = child.val().Scheduled_Date;
    var earnings = child.val().Estimated_Cost;

    i++;
    $('<div>', {id:'available' + i, class:"avail-accept-jobs-div margin-bottom-twentypx"}).appendTo('#availableJobs');
    $('#available' + i).append('<div class="delete-job delete-avail-job"><p class="text-center font-weight-bold"><b>X</b></p></div>');
    $('#available' + i).append('<p>Name: ' + name + '</p>');
    $('#available' + i).append('<p>Date: ' + date + '</p>');
    $('#available' + i).append('<p>Time: ' + time + '</p>');
    $('#available' + i).append('<p>Drive Time: ' + timeDriven + '</p>');
    $('#available' + i).append('<p>Potential Earnings: $' + earnings + '</p>');
    $('#available' + i).append('<div class="accept-job-button text-center"><p>Accept</p></div>');

  });
});

Мой вопрос:

Какой лучший способ предотвратить повторение записей?

Answer 1

Вы используете неправильное событие для ваших нужд, из документов на Прослушайте события с ценностями (выделено мной):

Вы можете использовать событие value, чтобы прочитать статический снимок содержимого по заданному пути, поскольку они существовали на момент события. Этот метод запускается один раз, когда слушатель подключен, и снова каждый раз, когда изменяются данные, включая дочерние. Обратному вызову события передается моментальный снимок, содержащий все данные в этом месте , включая дочерние данные. Если данных нет, возвращается снимок null.

Это означает, что на каждой новой должности вы будете получать все ранее опубликованные материалы, включая новую.

Вам нужно прослушать дочерние события , специально для child_added :

Получить списки предметов или прослушать дополнения к списку предметов. Это событие запускается один раз для каждого существующего дочернего элемента, а затем снова каждый раз, когда в указанный путь добавляется новый дочерний элемент. Слушателю передается снимок, содержащий данные нового дочернего элемента.

Моя интуиция подсказывает мне, что простая замена value на child_added поможет вам, хотя теперь вы будете получать элемент за элементом, больше не нужно повторять список; как это:

ref.on('child_added', function(snapshot) {
    var datas = snapshot.val();
    var time = snapshot.val().Scheduled_Time;
    var name = snapshot.val().Name;
    var timeDriven = snapshot.val().Time_Driven;
    var date = snapshot.val().Scheduled_Date;
    var earnings = snapshot.val().Estimated_Cost;

    i++;
    $('<div>', {id:'available' + i, class:"avail-accept-jobs-div margin-bottom-twentypx"}).appendTo('#availableJobs');
    $('#available' + i).append('<div class="delete-job delete-avail-job"><p class="text-center font-weight-bold"><b>X</b></p></div>');
    $('#available' + i).append('<p>Name: ' + name + '</p>');
    $('#available' + i).append('<p>Date: ' + date + '</p>');
    $('#available' + i).append('<p>Time: ' + time + '</p>');
    $('#available' + i).append('<p>Drive Time: ' + timeDriven + '</p>');
    $('#available' + i).append('<p>Potential Earnings: $' + earnings + '</p>');
    $('#available' + i).append('<div class="accept-job-button text-center"><p>Accept</p></div>');
});