質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

809閲覧

データベース(firestore)から取得したデータをリスト表示したい

teddy1121

総合スコア44

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/02/10 09:14

編集2022/01/12 10:55

前提・実現したいこと

こんにちは。
表題の件についてご教授ください。

やりたいことは「firestore」から取得した複数データをhtmlに表で表示したいです。

発生している問題・エラーメッセージ

consoleには取得したデータが表示されており、特にエラーは発生していません。

該当のソースコード

htmlには以下のように <div class = "content"> <form id="add-inout-form"></form> <ul id="inout-list"></ul> </div> JavaScriptには以下のように const inOutTime = document.querySelector('#inout-list'); function renderTime(doc){ let li = document.createElement('li'); let name = document.createElement('span'); let intime = document.createElement('span'); li.setAttribute('data-id', doc.id); name.textContent = doc.data().name; intime.textContent = doc.data().intime; li.appendChild(name); li.appendChild(intime); inOutTime.appendChild(li); } db.collection(userId).get().then((snapshot) => { snapshot.docs.forEach(doc => { console.log(doc); }) }) と書きましたがhtmlに値が表示されず途方に暮れています。

試したこと

YouTubeで見つけた動画にあったコードを写したのですが表示されませんでした。
JavaScriptに触れたのも最近の初心者なので初歩的なミスなのかもしれませんが、いろいろネットで検索しても解決に至らなかったので質問させて頂きました。
お分かりになる方がいらっしゃいましたら助けて頂けたら幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/02/10 10:55

>consoleには取得したデータが表示されており 提示されたコードにはコンソールに出力する処理は書かれてないように見えます。
teddy1121

2021/02/10 12:03

m.ts10806様 firestoreのタグがあるんですね!教えて頂きありがとうございます! コンソール部分失礼しました。 renderTime(doc)の部分をconsole.log(doc)で実験していた時にコンソールにエラーが出ていませんでした。 ご教授よろしくお願いいたします。
m.ts10806

2021/02/10 12:43

質問は編集できますので。
teddy1121

2021/02/10 12:47

m.ts10806様 度々失礼しました。 質問を編集しました。 よろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問