The Code (Cont.): Output

A DataSnapshot API contains data from a database location. Any time you read data from the database, you receive the data as a DataSnapshot. A DataSnapshot is an efficiently generated, immutable copy of the data at a database location. It cannot be modified and will never change (to modify data, you always call the set() method on a reference directly).
ref.on( "value", function( snapshot ) {
The method on() listens for data changes at a particular location. This is the primary way to read data from a database. Your callback will be triggered for the initial data and again whenever the data changes. Use off() to stop receiving updates.

⇓   Showing user #1
The value event will trigger once with the initial data stored at this location, and then trigger again each time the data changes. The DataSnapshot passed to the callback will be for the location at which on() was called. It will not trigger until the entire contents has been synchronized. If the location has no data, it will be triggered with an empty DataSnapshot (val() will return null).

const data = snapshot.val( );
A DataSnapshot is passed to the event callbacks you attach with on() or once(). You can extract the contents of the snapshot as a JavaScript object by calling the val() method.

var out = "ID: " + ID + "Name: " + Object.values(data)[1];
The JavaScript Object.values() method returns an array of a given object’s own enumerable property values, in the same order as that provided by a for...in loop.
view source
print?
01<script>
02 //
03 // Function to get form values
04 //
05 function getInputVal( input ) {
06  return document.getElementById( input ).value;
07 }
08 
09 //
10 // Show a user.
11 //
12 function showUser( ) {
13  var ID = getInputVal( 'ID' );
14  var ref = firebase.database( ).ref( 'users/' + ID );
15  ref.on( "value",
16   function( snapshot ) {
17    const data = snapshot.val( );
18    var out  = "ID: " + ID + "Name: " + Object.values(data)[1];
19        out += "Email: " + Object.values(data)[0];
20    document.getElementById( 'result' ).innerHTML = out;
21   },
22   function ( error ) {
23    document.getElementById( 'result' ).innerHTML = "Error"; }
24  );
25  return( false );
26 }
27 
28</script>





      “You cannot teach a man anything,    
      you can only help him find it within himself.”    
      ― Galileo