非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

FirebaseをJavaScriptから利用する方法(データの読み込み)

   

Firebase第三段としてFirebaseデータベースからデータを読み込んでくる方法です。

前回に続き第三段となります。

広告

 

Firebaseではデータが4つ入っています。Webブックマークを想定していて、フィールドは「label」「title」「url」の3つです。

 

まずは、HTMLのbody内にul要素を仕込んでおきます。idをbookmarksとしておきました。

<ul id="bookmarks"></ul>
  

 

次に、1つめの記事のJavaScriptソースコードの下に以下のコードを加えます。(HTML含めたソース全文は後述)

var db = firebase.firestore();
db.settings({
  timestampsInSnapshots: true
});
var collection = db.collection('bookmarks');
var bookmarks = document.getElementById('bookmarks');
collection.get().then(snapshot => {
  snapshot.forEach(fb => {
    var li = document.createElement('li');
    li.textContent = fb.data().title +" : "+ fb.data().label +" : "+ fb.data().url;
    bookmarks.appendChild(li);
  });
});
 

 

これで完了です。ブラウザで表示させるとfirebase内のデータを読み込んでリスト表示してくれます。

 

こちらがソースコード全文です。

広告

 

 - Firebase, HTML/JavaScript