0%

Node.js - 使用 reverse() 反轉資料排序

node

前面實作過一個簡易的代辦清單,

但目前的待辦清單最新的資料會在列表的後面,但現在使用者在陣列方法中可以使用 reverse() 方法反轉陣列的順序,但 firebase 只能用物件的方式呈現,那怎麼反轉呢?

把資料 push 到陣列中

既然物件沒有反轉,那就使用 forEach 把資料新增到陣列中吧!

來改寫一下隨時監聽內的寫法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
todo.on("value", function (snapshot) {
let str = "";
let data = [];
snapshot.forEach((item) => {
data.push(item.val());
});

data.reverse(); //* 反轉陣列資料

for (let item in data) {
str += `<li>${data[item].content}</li>`; //* 累加列表
}

list.innerHTML = str;
memo.value = ""; //* 按下送出後,清空 input 的值
});

說明:

  1. 原本 data 改為空陣列。
  2. snapshot 參數使用 forEach() 將資料一筆一筆新增到陣列中。
  3. 再把此 data 陣列的資料使用 reverse() 方法反轉排序。
  4. 因為要取得資料中的 content 的值,故使用 for...in 取得資料內容,並渲染在網頁上。

Demo: