首頁猿問如何使用 javascript...

如何使用 javascript 在不同視圖中顯示檢索到的 firabase 數據

JavaScript

慕萊塢森 2023-08-18 16:30:28

對于奇數 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 數據庫看起來像這個圖片。

查看完整描述

2 回答

守著星空守著你

TA貢獻1799條經驗獲得超8個贊

您必須從每個快照中獲取密鑰，確定它是奇數還是偶數，然后根據該值更新 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);

});

反對回復 2023-08-18

繁華開滿天機

TA貢獻1816條經驗獲得超4個贊

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

});

反對回復 2023-08-18

2 回答
0 關注
132 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用 javascript 在不同視圖中顯示檢索到的 firabase 數據

如何使用 javascript 在不同視圖中顯示檢索到的 firabase 數據

2 回答

添加回答