comment afficher les données de base de données récupérées dans une vue différente à l'aide de javascript

Question

Pour les identifiants impairs, je veux afficher la description puis l'image et pour les identifiants pairs, je veux afficher l'image puis la description. Mais le code que j'utilise est indiqué ci-dessous.

var rootRef = firebase.database().ref().child("products");
rootRef.on("child_added", snap => {
    //alert(snap.val());
    var desp = snap.child("description").val();
    var image = snap.child("image").val();
    var image_and_desp_string =       
   '<div class="row">'
     + '<div class="col-md-6 col-sm-6 productDetails">'
         + '<p>' + desp + '</p>'
     + '</div>'
     + '<div class="col-md-6 col-sm-6">'
         + '<img src="' + image + '">'
     + '</div>'
    + '</div>';

    $("#product_section").append(image_and_desp_string);
});

ce code montre l'image et la description côte à côte pour toutes les données. Je veux faire la différence pour les identifiants impairs et pairs. Veuillez aider !! Ma base de données Firebase ressemble à cette image.

Answer 1

Vous devrez obtenir la clé de chaque instantané, déterminer si c'est pair ou impair, puis mettre à jour le HTML en fonction de cela.

var rootRef = firebase.database().ref().child("products");
rootRef.on("child_added", snap => {
    var key = snap.key;
    var isOdd = parseInt(snap.key) % 2 == 1;
    var desp = snap.child("description").val();
    var image = snap.child("image").val();
    var imageString = '<div class="col-md-6 col-sm-6">'
         + '<img src="' + image + '">'
     + '</div>';
    var despString = '<div class="col-md-6 col-sm-6 productDetails">'
         + '<p>' + desp + '</p>'
     + '</div>';
    var image_and_desp_string =       
   '<div class="row">'
     + (isOdd ? despString : imageString)
     + (isOdd ? imageString : despString)
    + '</div>';

    $("#product_section").append(image_and_desp_string);
});

Answer 2

Cela ne peut pas être fait avec forEach, le code détaillé est donné ci-dessous:

var query = firebase.database().ref("products").orderByKey();
query.once("value")
  .then(function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      const key = Number(childSnapshot.key);
      console.log(key);
      // childData will be the actual contents of the child
      var desp = childSnapshot.child("description").val();
      var img = childSnapshot.child("image").val();

      key % 2 === 0 ?
      $("#product_section").append( //show value from Firebase, image then description '<div class="row">' + '<div class="col-md-6 col-sm-6">' + '<img src="' + img + '">' + '</div>' + '<div class="col-md-6 col-sm-6 productDetails">' + '<p>' + desp + '</p>' + '</div>' + '</div>') : $("#product_section").append(        //show value from Firebase
        '<div class="row">'
          + '<div class="col-md-6 col-sm-6 productDetails">'
              + '<p>' + desp + '</p>'
          + '</div>'
          + '<div class="col-md-6 col-sm-6">'
              + '<img src="' + img + '">'
          + '</div>'
         + '</div>');
  });
});