如何在Firebase数据库中检索值并将其插入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;  
});

我的网址将是这样的：https://travelertest-e316f.firebaseapp.com/?userid=11K47L3qgUOateC4LGSE29Un2W53&tripid=-Kiv3kukHYLMVefSGPqZ

我不知道如何使其工作，以便无论旅行中有多少张照片，它都会检索所有“photourl”值。而且我不知道如何在一个简单的html页面上显示它们，以便页面显示与旅行中一样多的照片。

谢谢！

Answer 1

您可以遍历trip对象并将dataourls放入数组中：

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