如何使用 javascript 在不同视图中显示检索到的 firabase 数据

Question

对于奇数 ID，我想先显示描述，然后显示图像，对于偶数 ID，我想先显示图像，然后显示描述。但我使用的代码如下。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);});此代码并排显示所有数据的图像和描述。我想区分奇数 id 和偶数 id 数据。请帮忙！！我的 firebase 数据库看起来像这个图片。

Answer 1

您必须从每个快照中获取密钥，确定它是奇数还是偶数，然后根据该值更新 HTML。

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

使用 forEach 无法完成，详细代码如下：

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

  });

});