は、どのように（私のコメントを赤で）Firebaseデータベース内の値を取得し、

Question

がここに私のデータベース構造であるHTMLにそれらを挿入するには：

目的は旅行の簡単なWebページの写真の上に表示することです。私は、旅行の写真ごとにこのデータベースの値 "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は、このようなものになります。私はそれがありませんすべての「photourl」の値を取得するので、それを動作させる方法がわからないhttps://travelertest-e316f.firebaseapp.com/?userid=11K47L3qgUOateC4LGSE29Un2W53&tripid=-Kiv3kukHYLMVefSGPqZ

旅行に何枚の写真があるかということです。そして、私は単純な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));