如何火力地堡數據庫中檢索值，並將其插入到HTML

Question

這裏是我的數據庫結構（紅色我的意見）：

的目的是要表明一個簡單的網頁，照片之旅。我正嘗試在此數據庫中爲每次旅行照片檢索「photourl」值。

這裏是我的html代碼：

<div class="main"> 

     <div class="spot"> 

     <img id="image" height="400" width="400"/> 

     </div> 

    </div> 

    <p><script>document.write(userid);</script></p> 
    <p><script>document.write(tripid);</script></p> 
    <p><script>document.write(photourl);</script></p> 

最後3行只是這裏要說明的變量是否有任何值（當我嘗試我的HTML代碼，它不顯示任何）。

我的javascript代碼：

//Get User ID and Trip ID in URL 

function GetURLParameter(sParam) 
{ 
var sPageURL = window.location.search.substring(1); 
var sURLVariables = sPageURL.split('&'); 
for (var i = 0; i < sURLVariables.length; i++) 
{ 
    var sParameterName = sURLVariables[i].split('='); 
    if (sParameterName[0] == sParam) 
    { 
     return sParameterName[1]; 
    } 
} 
} 
    var userid = GetURLParameter('userid'); 
    var tripid = GetURLParameter('tripid'); 

//Get image from database 

var database = firebase.database(); 
return firebase.database().ref('/photos/' + userid + 'trips' + 
tripid).once('photourl').then(function(insert) 
{ 
document.getElementsById('image').src = photourl; 
}); 

我的URL會是這樣，那麼：https://travelertest-e316f.firebaseapp.com/?userid=11K47L3qgUOateC4LGSE29Un2W53&tripid=-Kiv3kukHYLMVefSGPqZ

我不知道如何使它工作，以便檢索所有「photourl」值不關於旅行中有多少照片。我不知道如何在簡單的HTML頁面上顯示它們，以便頁面顯示與旅行中一樣多的照片。

謝謝！

Answer 1

您可以在行程目標迭代，並獲得photourls在數組中：

// add a return statement here if you'll use it as a function 
database.ref(`photos/${userId}/trips/${tripId}`).once('value') // will return you all the photo objects inside the `tripId` 
.then(photosSnap => { 
    const photosObj = photosSnap.val(); 
    const photosUrl = Object.keys(photosObj).map(key => photosObj[key].photourl); 
    // then you can return the array or use it here; 
    console.log(photosUrl); // will be an array of all the photourls 
}).catch(err => alert(err));