CODEWITHSUNDEEP
javascriptfirebasefirebase-realtime-database
mur7ay
mur7ay

Reputation: 833

Repeating data displayed via Firebase with new user input

When a user is logged (user 1) into my website, they're displayed data and when another user (user 2) submits new data it's supposed to add one new entry to the bottom of the original list. However, when the other user (user 2) submits a new request, the page displays the original list followed by that same list repeated after the initial list but with the new entry as well.

I'm wanting to add just that new entry to the bottom of the list without repeating again. I've been trying to follow this and tried the solution but it doesn't work for me: Firebase child_added event listener returning duplicate data

Example:

Entry 1

Entry 2

Entry 3

A new entry is made via user 2:

Entry 1

Entry 2

Entry 3

Entry 1

Entry 2

Entry 3

Entry 4

What I'm wanting it to do:

Entry 1

Entry 2

Entry 3

Entry 4

Code snippet: 

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>');

  });
});

My question:

What's the best way to prevent the repeating entries?

Upvotes: 1

Views: 75

Answers (1)

Jaime Gomez
Jaime Gomez

Reputation: 7067

You're using the wrong event for your needs, from the docs on Listen for value events (emphasis mine):

You can use the value event to read a static snapshot of the contents at a given path, as they existed at the time of the event. This method is triggered once when the listener is attached and again every time the data, including children, changes. The event callback is passed a snapshot containing all data at that location, including child data. If there is no data, the snapshot returned is null.

This means that on each new job post, you'll get all the items previously posted, including the new one.

What you need is to listen for child events, specifically for child_added:

Retrieve lists of items or listen for additions to a list of items. This event is triggered once for each existing child and then again every time a new child is added to the specified path. The listener is passed a snapshot containing the new child's data.

My intuition tells me that just substituting value with child_added will do the trick for you, though now you'll be getting item by item, no need to iterate the list anymore; like this:

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>');
});

Upvotes: 1

Related Questions