【Firebase+Firestore】画面からFirestoreドキュメントを更新する
HTMLに取り付けたjsで、画面操作の結果を受け取ってfirestoreドキュメントを更新します。
function inputCheck(){
for(let index in inputFormElements){
let elem = inputFormElements[index]
if(typeof(elem) != "object"){continue} 'リストの中に変なのがあったら無視
elem.addEventListener("change", updateFirebase)
}
}
function updateFirebase(event){
let dom_id = event.srcElement.id;
let value = event.target.value;
let firestoreFieldName = "フィールド名";
let firestoreRef = firestore.collection('コレクション名').doc('ドキュメント名');
let updateObject = {}
updateObject[firestoreFieldName] = value
console.log(firestoreRef)
return firestoreRef.update(updateObject)
.then(()=>{alert(firestoreFieldName + "を更新しました")})
.catch((error)=>{alert("更新に失敗しました。エラーコード→【" + error + "】")});
}
var inputFormElements = document.getElementsByClassName("input")
window.addEventListener("DOMContentLoaded", inputCheck)
ッてな感じで。流れはざっくり
1・監視するフォームを取得して変数に入れる
2・取得したフォームにEventListenerを追加する
3・EventListenerが発火したらupdateFirebaseが動く
今回は複数フォームを監視する必要があるので、
window.addEventListener("DOMContentLoaded", inputCheck)
でwindow自体にEventListenerを設置して、画面読み込み時にinputCheckを起動、inputCheckの中で監視したいフォームのリストをぐるぐるして一個ずつEventListenerを設置、という面倒なことしてます。
「更新ボタン押したら更新」っていうだけで良ければ、buttun要素にonclick="updateFirestore"付けておけばいいです。ボタンをクリックしたらupdateFirebaseが発火します。
本命の処理
function updateFirebase(event){
let dom_id = event.srcElement.id;
let value = event.target.value;
let firestoreFieldName = "フィールド名";
let firestoreRef = firestore.collection('コレクション名').doc('ドキュメント名');
let updateObject = {}
updateObject[firestoreFieldName] = value
console.log(firestoreRef)
return firestoreRef.update(updateObject)
.then(()=>{alert(firestoreFieldName + "を更新しました")})
.catch((error)=>{alert("更新に失敗しました。エラーコード→【" + error + "】")});
}
無駄にdom_id取ってますが、eventから該当のフォームのid特定する方法忘れないようにするためのメモです。
updateFirebase()の引数にeventを取っておくと、EventListenerが変更を感知した時に変更情報をeventに入れてくれます。便利~。
そうすると、event.srcElementやtargetの中からidとかclassとかvalueとか色々取れます。
他にもconsole.logして中身掘ってみると、割と何でも取れるってことが分かります。便利~
大筋は、
firestoreRef = firestore.collection('コレクション名').doc('ドキュメント名')
で参照を作って、
let updateObject = {}
updateObject[firestoreFieldName] = value
で載せたいデータ作って
firestoreRef.update(updateObject)
で更新掛けて、その結果をthenとcatchで受け取る、と。
ウワーーープロミスだーーーーーー!!!!!
……だけど、とりあえずウワーーープロミスだーーーって思っても、今は
firestoreRef.update(updateObject)
.then("成功時にやりたいことをアロー関数で")
.chach("失敗時にやりたいことをアロー関数で")
って覚えておけば大丈夫だぞ!
ところで、ウワーーーープロミスだーーーー!!!ってつい最近叫んだ記憶があったんですが
これだった。
この記事が気に入ったらサポートをしてみませんか?