jak wyświetlić pobrane dane firabase w innym widoku przy użyciu JavaScript

Question

W przypadku nieparzystego identyfikatora chcę pokazać opis, a następnie obraz, a dla parzystego identyfikatora chcę pokazać obraz, a następnie opis. Ale jakiego kodu używam, podano poniżej.

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);
});

ten kod pokazuje obok siebie obraz i opis dla wszystkich danych. Chcę zmienić dane dotyczące nieparzystych i parzystych identyfikatorów. Proszę pomóż!! Moja baza danych Firebase wygląda jak ten obraz.

Answer 1

Będziesz musiał pobrać klucz z każdej migawki, określić, czy jest nieparzysty, czy parzysty, a następnie zaktualizować kod HTML na tej podstawie.

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

Nie można tego zrobić za pomocą forEach, kod szczegółów jest podany poniżej:

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>');
  });
});