如何使用JavaScript在不同的视图中显示检索的firabase数据 [英] how to show retrived firabase data in different view using javascript

问题描述

对于奇数id，我想先显示说明，然后再显示图像，对于偶数id，我要先显示图像，然后再说明.但是下面给出了我使用的代码.

For odd id, I want to show description then image and for even id I want to show image then description. But which code I use is given below.

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数据库看起来像此图像.

this code shows image and description side by side for all data. I want to make difference for odd id and even id data. Please help!! My firebase database is looked like this image.

推荐答案

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

You'll have to get the key from each snapshot, determine whether it's odd or even, and then update the HTML based on that.

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

这篇关于如何使用JavaScript在不同的视图中显示检索的firabase数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！