如何使用 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 => {&nbsp; &nbsp; var key = snap.key;&nbsp; &nbsp; var isOdd = parseInt(snap.key) % 2 == 1;&nbsp; &nbsp; var desp = snap.child("description").val();&nbsp; &nbsp; var image = snap.child("image").val();&nbsp; &nbsp; var imageString = '<div class="col-md-6 col-sm-6">'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;+ '<img src="' + image + '">'&nbsp; &nbsp; &nbsp;+ '</div>';&nbsp; &nbsp; var despString = '<div class="col-md-6 col-sm-6 productDetails">'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;+ '<p>' + desp + '</p>'&nbsp; &nbsp; &nbsp;+ '</div>';&nbsp; &nbsp; var image_and_desp_string =&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;'<div class="row">'&nbsp; &nbsp; &nbsp;+ (isOdd ? despString : imageString)&nbsp; &nbsp; &nbsp;+ (isOdd ? imageString : despString)&nbsp; &nbsp; + '</div>';&nbsp; &nbsp; $("#product_section").append(image_and_desp_string);});

Answer 2

使用 forEach 无法完成，详细代码如下：var query = firebase.database().ref("products").orderByKey();query.once("value")&nbsp; .then(function(snapshot) {&nbsp; &nbsp; snapshot.forEach(function(childSnapshot) {&nbsp; &nbsp; &nbsp; const key = Number(childSnapshot.key);&nbsp; &nbsp; &nbsp; console.log(key);&nbsp; &nbsp; &nbsp; // childData will be the actual contents of the child&nbsp; &nbsp; &nbsp; var desp = childSnapshot.child("description").val();&nbsp; &nbsp; &nbsp; var img = childSnapshot.child("image").val();&nbsp; &nbsp; &nbsp; key % 2 === 0 ?&nbsp; &nbsp; &nbsp; $("#product_section").append(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //show value from Firebase, image then description&nbsp; &nbsp; &nbsp; &nbsp; '<div class="row">'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '<div class="col-md-6 col-sm-6">'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '<img src="' + img + '">'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '</div>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '<div class="col-md-6 col-sm-6 productDetails">'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '<p>' + desp + '</p>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '</div>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;+ '</div>')&nbsp; &nbsp; &nbsp; : $("#product_section").append(&nbsp; &nbsp; &nbsp; &nbsp; //show value from Firebase&nbsp; &nbsp; &nbsp; &nbsp; '<div class="row">'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '<div class="col-md-6 col-sm-6 productDetails">'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '<p>' + desp + '</p>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '</div>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '<div class="col-md-6 col-sm-6">'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '<img src="' + img + '">'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '</div>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;+ '</div>');&nbsp; });});