iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
3

現在可以來試著修改資料了,

想法是先取得單一一筆資料,
再用覆蓋的方式將資料覆蓋,
達到修改的目的。

我們把資料存成以name當成key的格式像是這樣:

JSON

接著我們使用name來查詢、取得資料。

<div>
  查詢:<input id='find' type="text" placeholder="Name">
  <button id='btnfind'>find</button>
</div>
var findName = document.getElementById('find').value;
var findItem = firebase.database().ref('users/' + findName + '/');
findItem.once('value', function(snapshot) {
    console.log(snapshot.val());    
});

find

find!

接下來就可以開始修改資料了,
修改資料的方法,
使用set() 覆蓋資料。

這時候就會發現一開始選擇用name來當key並不是一個好選擇,
因為有可能user就是想改名子,所以用一個固定不會變資料來當key會更好。

查詢宮女寶鵑之後讓結果在 <input>中顯示。
input

直接修改後再使用set() 將資料覆蓋掉。

var modData = {
    name: modName,
    mail: modMail,
    phone: modPhone
  }
  
console.log(moddata);
// 這裡的name 指的是用來當作key的name
firebase.database().ref('users/' + name ).set(modData);

這邊我改了宮女寶鵑的手機號碼

update

可以回到firebase看到
宮女寶鵑的手機號碼確實更改了
update


上一篇
[10] firebase database update
下一篇
[12] Gulp - 安裝Gulp
系列文
我在繡房繡小主常服的日子-- 初入前端工程師的第一個小挑戰30

尚未有邦友留言

立即登入留言