Populating a container with one entry per Firebase entry

Question

I'm using Firebase to store users info and I'm wanting to populate divs with each users info so it can be either accepted or deleted (but not deleted from Firebase).

So I wanted it to be structured something like this:

---------------------- 
Name 
Email 
Date
---------------------- 
Name 
Email 
Date
---------------------- 
and so on....

What I'm currently getting back is something like this:

What is the proper way to generate a div dependent upon how much data is in Firebase and format the content as specificed?

HTML:

<div>Some entry here
    <h4 id="name"></h4>
    <h4 id="date"></h4>
    <h6 id="email"></h6>
    <button id="0" class="remove">Remove</button>
  </div>
  <div>Another entry here
    <button id="1" class="remove">Remove</button>
  </div>

Javascript:

var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
  snapshot.forEach(function(child) {
    var datas = child.val();
    var email = child.val().Email;
    var name = child.val().Name;
    var date = child.val().Scheduled_Date;
    date = date.replace('.', '/');
    $('#name').append(name);
    $('#email').append(email);
    $('#date').append(date);
  });
});

Renaud Tarnec · Accepted Answer · 2018-04-27T14:46:17.897

For each child, you are appending the values to the same HTML elements (i.e. all the names are appended to the h4 element with id "name", all the emails to the one with id "email" and so on).

So it is normal they are displayed on a line (one row).

You have to create a new placeholder for each child (and it's set of values). You can do that with e.g. a table, like:

var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];


var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
  snapshot.forEach(function(child) {
    var datas = child.val();
    var email = child.val().Email;
    var name = child.val().Name;
    var date = child.val().Scheduled_Date;
    date = date.replace('.', '/');

    // Insert a row in the table at the last row
    var newRow = tableRef.insertRow(tableRef.rows.length);
    // Insert a cell in the row at index 0
    var newCell = newRow.insertCell(0);
    // Append a text node to the cell with name value
    var newText = document.createTextNode(name);  // <-- name value from the child
    newCell.appendChild(newText);

    var newRow = tableRef.insertRow(tableRef.rows.length);
    var newCell  = newRow.insertCell(0);
    var newText  = document.createTextNode(email);  // <-- email value from the child
    newCell.appendChild(newText);

    var newRow   = tableRef.insertRow(tableRef.rows.length);
    var newCell  = newRow.insertCell(0);
    var newText  = document.createTextNode(date);  // <-- date value from the child
    newCell.appendChild(newText);

  });
});

Inspired by How to insert row in HTML table body in Javascript?. See the fiddle in this SO post.

Or you can do it with divs, here is a possible code:.

HTML

<div id="parentDiv"></div>

JavaScript

var element;
var ref = firebase.database().ref('requests');
ref.on('value', function(snapshot) {
  snapshot.forEach(function(child) {
    var datas = child.val();
    var email = child.val().Email;
    var name = child.val().Name;
    var date = child.val().Scheduled_Date;
    date = date.replace('.', '/');

    element = document.createElement("div");
    element.appendChild(document.createTextNode(name));
    document.getElementById('parentDiv').appendChild(element);      

    element = document.createElement("div");
    element.appendChild(document.createTextNode(email));
    document.getElementById('parentDiv').appendChild(element);      

    element = document.createElement("div");
    element.appendChild(document.createTextNode(date));
    document.getElementById('parentDiv').appendChild(element);   
    //You could add a specific css class to this div to generate the bottom border   

  });
});

To be complete, note that you could also use some MVVM javascript frameworks like vue.js, knockout.js as well as angular, react... in order to easily reflect in your HTML DOM the results of queries to your backend (and vice-versa).

Populating a container with one entry per Firebase entry

1 Answers1