L'affichage des données de Firebase base de données dans une page HTML

Je suis nouveau sur Firebase et JS.
J'essaie d'afficher certaines informations de l'utilisateur sur une page web qui est stocké dans Firebase base de données.

Format des données est quelque chose comme cette image:

L'affichage des données de Firebase base de données dans une page HTML

Basé sur l'image ci-dessus :

À partir de nœuds disponibles, UserData est celui qui détient le nom, e-mail, attribué id

Je n'ai pas besoin de montrer User1/User2/User3, ils sont illisibles comme HNpTPoCiAYMZsdfdsfDD3SDDSs555S3Bj6X35.

J'ai juste besoin de Valeurs associées à Attr1 et Attr3 pour tous les utilisateurs, il existe.

Maintenant, je voudrais récupérer ces données et de les afficher dans une page web(un de HTML) dans un format tabulaire.

Nom | ID Attribué

___________________

Nom 1| ID 1

Nom 1| ID 2

Nom de 3| ID 3

J'ai vu quelques tutos mais ils n'étaient pas claires et utiles.

C'est le code Javascript que j'ai écrit des tutoriels, et un seul enregistrement est affiché à partir de la base de données, plutôt que le tout -
Aussi c'est le dernier enregistrement dans la base de données, puis-je afficher le même dans l'ordre de tri de AssignedID valeur

 (function(){
//Initialize Firebase
var config = {
    apiKey: "Aaasff34eaADASDAS334444qSDASD23ASg5H",
    authDomain: "APP_NAME.firebaseapp.com",
    databaseURL: "https://APP_NAME.firebaseio.com",
    storageBucket: "APP-NAME.appspot.com",
    messagingSenderId: "51965125444878"
};
firebase.initializeApp(config);

var userDataRef = firebase.database().ref("UserData").orderByKey();
userDataRef.once("value")
  .then(function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      var key = childSnapshot.key;
      var childData = childSnapshot.val();              //childData will be the actual contents of the child

      var name_val = childSnapshot.val().Name;
      var id_val = childSnapshot.val().AssignedID;
      document.getElementById("name").innerHTML = name_val;
      document.getElementById("id").innerHTML = id_val;
  });
 });
}());

Quelqu'un peut-il bien vouloir m'aider à réaliser cela? Merci à l'avance.

OriginalL'auteur Prashanth kumar | 2017-03-09

  1. 2

    Il y a deux choses que vous devez changer 1. au lieu de l'aide obtenir de l'élément par le nom de l'utiliser jquery et aussi afin de ne pas écraser lui-même utilisez ajout à la liste de sélectionner les éléments de la base de données.

    var userDataRef = firebase.database().ref("UserData").orderByKey();
userDataRef.once("value").then(function(snapshot) {
snapshot.forEach(function(childSnapshot) {
  var key = childSnapshot.key;
  var childData = childSnapshot.val();              

  var name_val = childSnapshot.val().Name;
  var id_val = childSnapshot.val().AssignedID;

  $("#name").append(name_val);
  $("#id").append(id_val);

  });
});

    Ce sur son propre serait sortie de votre base de données les éléments les uns après les autres et donc, pour ajouter une mise en forme de chaque élément de base de données, vous pouvez faire des choses comme ça (au passage c'est pourquoi vous devez utiliser jquery comme cela ne fonctionnait pas avec la normale js trucs)...

    $("#name").append("<p>" + name_val + "</p><p> " + id_val + "</p>
<br>");

    Ce serait ressembler à ceci pour chaque nom et l'id de

    Nom Id

    Nom Id

    Nom Id

    Vous pourriez également avoir utilisé ce pour la saisie de données à partir de votre base de données dans un tableau en mettant chaque élément dans une étiquette et ainsi de suite si vous ne savez pas ce que im sur le sujet juste aller apprendre au sujet de tableaux html et à partir de là, son auto-explicatif.

    OriginalL'auteur Freddy Cunningham

  2. 1

    La raison pour laquelle vous n'est que le dernier élément est à cause de ces 2 lignes

     document.getElementById("name").innerHTML = name_val;
 document.getElementById("id").innerHTML = id_val;

    Vous n'êtes pas créer de nouveaux articles, le simple fait d'écrire/de l'écrasement dans le même endroit. Chaque élément remplace le nom/id de l'avant jusqu'à ce que le dernier élément. Pensez à utiliser element.appendChild() ajouter des éléments à un <li> élément.

    Autant que le tri va, consultez cette page de l'firebase doc: https://firebase.google.com/docs/database/web/lists-of-data#sorting_and_filtering_data

    Espérons que cette aide!

    OriginalL'auteur Howie