web-dev-qa-db-fra.com

Afficher les données de la base de données Firebase dans une page HTML

Firebase et JS sont nouveaux pour moi. J'essaie d'afficher des informations sur les utilisateurs sur une page Web stockée dans la base de données Firebase.

Le format de données est quelque chose comme cette image:

Click here for image

Basé sur l'image ci-dessus:  
Parmi les nœuds disponibles, UserData est celui qui contient le nom, l'email, id-assigné

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

J'ai juste besoin des valeurs associées à Attr1 et Attr3 pour tous les utilisateurs qui existent.

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

Nom | ID attribué
___________________
Nom 1 | ID 1
Nom 1 | ID 2
Nom 3 | ID 3

J'ai vu des tutoriels mais ils n'étaient ni clairs ni utiles.

C’est le code Javascript sur lequel j’ai écrit quelques tutoriels, et un seul enregistrement est affiché à partir de la base de données, plutôt que l’ensemble - Il s’agit également du dernier enregistrement disponible dans la base de données. Puis-je afficher le même ordre de tri de la valeur AssignedID

 (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 à atteindre cet objectif? Merci d'avance.

htmlfirebasefirebase-realtime-database
3
Prashanth kumar

Il y a deux choses que vous devez changer 1. au lieu d'utiliser get élément par id, utilisez jquery et pour éviter qu'elle ne s'écrase elle-même, utilisez append pour répertorier les éléments sélectionnés dans 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);

  });
});

Cela seul produirait vos éléments de base de données les uns après les autres et donc, pour ajouter une mise en forme à chaque élément de base de données, vous pouvez faire des choses comme celle-ci (en passant, c’est pourquoi vous devez utiliser jquery car cela ne fonctionne pas avec js normal des trucs)...

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

Cela ressemblerait à ceci pour chaque nom et identifiant 

Nom Id

Nom Id

Nom Id

Vous auriez aussi pu utiliser cela pour entrer vos données de votre base de données dans une table en mettant chaque élément dans une balise, et ainsi de suite, si vous ne savez pas quoi dire, allez simplement en apprendre plus sur les tables html et, à partir de ce moment-là, explicite. .

2
Freddy Cunningham

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

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

Vous ne créez pas de nouveaux éléments, vous écrivez/écrasez simplement au même endroit. Chaque élément remplace le nom/l'identifiant de celui qui précède jusqu'au dernier élément. Pensez à utiliser element.appendChild() pour ajouter les éléments à un élément <li>.

En ce qui concerne le tri, consultez cette page de la doc de firebase: https://firebase.google.com/docs/database/web/lists-of-data#sorting_and_filtering_data

J'espère que cela t'aides!

1
Howie