Làm việc với Danh sách dữ liệu trên web

Lấy một tham chiếu cơ sở dữ liệu

Để đọc hoặc ghi dữ liệu vào cơ sở dữ liệu, bạn cần có một phiên bản của firebase.database.Reference:

Web

import { getDatabase } from "firebase/database";

const database = getDatabase();

Web

var database = firebase.database();

Đọc và ghi danh sách

Thêm vào danh sách dữ liệu

Sử dụng phương thức push() để thêm dữ liệu vào danh sách trong các ứng dụng nhiều người dùng. Phương thức push() sẽ tạo một khoá duy nhất mỗi khi một thành phần con mới được thêm vào tham chiếu Firebase đã chỉ định. Bằng cách sử dụng các khoá được tạo tự động này cho từng phần tử mới trong danh sách, một số ứng dụng có thể thêm các phần tử con vào cùng một vị trí cùng một lúc mà không xảy ra xung đột ghi. Khoá duy nhất do push() tạo dựa trên dấu thời gian, vì vậy, các mục trong danh sách sẽ tự động được sắp xếp theo thứ tự thời gian.

Bạn có thể dùng thông tin tham chiếu đến dữ liệu mới do phương thức push() trả về để lấy giá trị của khoá được tạo tự động của đối tượng con hoặc đặt dữ liệu cho đối tượng con. Thuộc tính .key của một giá trị tham chiếu push() chứa khoá được tạo tự động.

Bạn có thể sử dụng các khoá được tạo tự động này để đơn giản hoá việc làm phẳng cấu trúc dữ liệu. Để biết thêm thông tin, hãy xem ví dụ về việc phân phối dữ liệu.

Ví dụ: push() có thể được dùng để thêm một bài đăng mới vào danh sách bài đăng trong một ứng dụng xã hội:

Web

import { getDatabase, ref, push, set } from "firebase/database";

// Create a new post reference with an auto-generated id
const db = getDatabase();
const postListRef = ref(db, 'posts');
const newPostRef = push(postListRef);
set(newPostRef, {
    // ...
});

Web

// Create a new post reference with an auto-generated id
var postListRef = firebase.database().ref('posts');
var newPostRef = postListRef.push();
newPostRef.set({
    // ...
});

Theo dõi các sự kiện phụ

Các sự kiện con được kích hoạt để phản hồi các thao tác cụ thể xảy ra với các thành phần con của một nút từ một thao tác, chẳng hạn như một thành phần con mới được thêm thông qua phương thức push() hoặc một thành phần con được cập nhật thông qua phương thức update().

Sự kiện Mức sử dụng thông thường
child_added Truy xuất danh sách các mục hoặc theo dõi các mục được thêm vào danh sách. Sự kiện này được kích hoạt một lần cho mỗi thành phần con hiện có, sau đó kích hoạt lại mỗi khi một thành phần con mới được thêm vào đường dẫn đã chỉ định. Trình nghe được truyền một ảnh chụp nhanh chứa dữ liệu của phần tử con mới.
child_changed Theo dõi các thay đổi đối với các mục trong danh sách. Sự kiện này được kích hoạt bất cứ khi nào một nút con được sửa đổi. Điều này bao gồm mọi nội dung sửa đổi đối với các thành phần con của nút con. Ảnh chụp nhanh được truyền đến trình nghe sự kiện chứa dữ liệu đã cập nhật cho thành phần con.
child_removed Lắng nghe các mục bị xoá khỏi danh sách. Sự kiện này được kích hoạt khi một phần tử con trực tiếp bị xoá.Ảnh chụp nhanh được truyền đến khối lệnh gọi lại chứa dữ liệu của phần tử con bị xoá.
child_moved Lắng nghe các thay đổi về thứ tự của các mục trong danh sách có thứ tự. Các sự kiện child_moved luôn tuân theo sự kiện child_changed khiến thứ tự của mục thay đổi (dựa trên phương thức sắp xếp hiện tại của bạn).

Mỗi thành phần này có thể hữu ích khi bạn muốn theo dõi các thay đổi đối với một nút cụ thể trong cơ sở dữ liệu. Ví dụ: một ứng dụng blog xã hội có thể sử dụng đồng thời các phương thức này để theo dõi hoạt động trong phần bình luận của một bài đăng, như minh hoạ dưới đây:

Web

import { getDatabase, ref, onChildAdded, onChildChanged, onChildRemoved } from "firebase/database";

const db = getDatabase();
const commentsRef = ref(db, 'post-comments/' + postId);
onChildAdded(commentsRef, (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

onChildChanged(commentsRef, (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

onChildRemoved(commentsRef, (data) => {
  deleteComment(postElement, data.key);
});

Web

var commentsRef = firebase.database().ref('post-comments/' + postId);
commentsRef.on('child_added', (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_changed', (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_removed', (data) => {
  deleteComment(postElement, data.key);
});

Theo dõi các sự kiện giá trị

Mặc dù cách được đề xuất để đọc danh sách dữ liệu là theo dõi các sự kiện con, nhưng trong một số trường hợp, việc theo dõi các sự kiện giá trị trên một tài liệu tham khảo danh sách sẽ hữu ích.

Việc đính kèm một trình theo dõi value vào danh sách dữ liệu sẽ trả về toàn bộ danh sách dữ liệu dưới dạng một ảnh chụp nhanh duy nhất mà bạn có thể lặp lại để truy cập vào từng phần tử con.

Ngay cả khi chỉ có một kết quả trùng khớp cho truy vấn, ảnh chụp nhanh vẫn là một danh sách; danh sách này chỉ chứa một mục. Để truy cập vào mục này, bạn cần lặp lại kết quả:

Web

import { getDatabase, ref, onValue } from "firebase/database";

const db = getDatabase();
const dbRef = ref(db, '/a/b/c');

onValue(dbRef, (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    const childKey = childSnapshot.key;
    const childData = childSnapshot.val();
    // ...
  });
}, {
  onlyOnce: true
});

Web

ref.once('value', (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    var childKey = childSnapshot.key;
    var childData = childSnapshot.val();
    // ...
  });
});

Mẫu này có thể hữu ích khi bạn muốn tìm nạp tất cả các thành phần con của một danh sách trong một thao tác duy nhất, thay vì theo dõi các sự kiện bổ sung về thành phần con được thêm.

Sắp xếp và lọc dữ liệu

Bạn có thể dùng lớp Realtime Database Query để truy xuất dữ liệu được sắp xếp theo khoá, theo giá trị hoặc theo giá trị của một phần tử con. Bạn cũng có thể lọc kết quả đã sắp xếp theo một số lượng kết quả cụ thể hoặc một dải khoá hoặc giá trị.

Sắp xếp dữ liệu

Để truy xuất dữ liệu đã sắp xếp, hãy bắt đầu bằng cách chỉ định một trong các phương thức sắp xếp theo để xác định cách sắp xếp kết quả:

Phương thức Cách sử dụng
orderByChild() Sắp xếp kết quả theo giá trị của một khoá con hoặc đường dẫn con lồng nhau được chỉ định.
orderByKey() Sắp xếp kết quả theo khoá con.
orderByValue() Sắp xếp kết quả theo giá trị con.

Mỗi lần, bạn chỉ có thể sử dụng một phương thức sắp xếp theo. Việc gọi phương thức sắp xếp theo nhiều lần trong cùng một truy vấn sẽ gây ra lỗi.

Ví dụ sau đây minh hoạ cách bạn có thể truy xuất danh sách các bài đăng hàng đầu của người dùng, được sắp xếp theo số lượng sao:

Web

import { getDatabase, ref, query, orderByChild } from "firebase/database";
import { getAuth } from "firebase/auth";

const db = getDatabase();
const auth = getAuth();

const myUserId = auth.currentUser.uid;
const topUserPostsRef = query(ref(db, 'user-posts/' + myUserId), orderByChild('starCount'));

Web

var myUserId = firebase.auth().currentUser.uid;
var topUserPostsRef = firebase.database().ref('user-posts/' + myUserId).orderByChild('starCount');

Thao tác này xác định một truy vấn khi kết hợp với một trình nghe con sẽ đồng bộ hoá ứng dụng với các bài đăng của người dùng từ đường dẫn trong cơ sở dữ liệu dựa trên mã nhận dạng người dùng của họ, được sắp xếp theo số lượng sao mà mỗi bài đăng nhận được. Kỹ thuật sử dụng mã nhận dạng làm khoá chỉ mục này được gọi là phân phối dữ liệu. Bạn có thể đọc thêm về kỹ thuật này trong phần Cấu trúc cơ sở dữ liệu.

Lệnh gọi đến phương thức orderByChild() chỉ định khoá con để sắp xếp kết quả theo. Trong trường hợp này, các bài đăng được sắp xếp theo giá trị của phần tử con "starCount" tương ứng. Bạn cũng có thể sắp xếp các truy vấn theo các phần tử con lồng nhau, trong trường hợp bạn có dữ liệu như sau:

"posts": {
  "ts-functions": {
    "metrics": {
      "views" : 1200000,
      "likes" : 251000,
      "shares": 1200,
    },
    "title" : "Why you should use TypeScript for writing Cloud Functions",
    "author": "Doug",
  },
  "android-arch-3": {
    "metrics": {
      "views" : 900000,
      "likes" : 117000,
      "shares": 144,
    },
    "title" : "Using Android Architecture Components with Firebase Realtime Database (Part 3)",
    "author": "Doug",
  }
},

Trong trường hợp này, chúng ta có thể sắp xếp các phần tử trong danh sách theo các giá trị được lồng bên dưới khoá metrics bằng cách chỉ định đường dẫn tương đối đến phần tử con được lồng trong lệnh gọi orderByChild().

Web

import { getDatabase, ref, query, orderByChild } from "firebase/database";

const db = getDatabase();
const mostViewedPosts = query(ref(db, 'posts'), orderByChild('metrics/views'));

Web

var mostViewedPosts = firebase.database().ref('posts').orderByChild('metrics/views');

Để biết thêm thông tin về cách sắp xếp các loại dữ liệu khác, hãy xem bài viết Cách sắp xếp dữ liệu truy vấn.

Lọc dữ liệu

Để lọc dữ liệu, bạn có thể kết hợp bất kỳ phương thức giới hạn hoặc phạm vi nào với phương thức sắp xếp theo khi tạo truy vấn.

Phương thức Cách sử dụng
limitToFirst() Đặt số lượng tối đa các mục cần trả về từ đầu danh sách kết quả có thứ tự.
limitToLast() Đặt số lượng tối đa các mục cần trả về từ cuối danh sách kết quả có thứ tự.
startAt() Trả về các mục lớn hơn hoặc bằng khoá hoặc giá trị đã chỉ định, tuỳ thuộc vào phương thức sắp xếp đã chọn.
startAfter() Trả về các mục lớn hơn khoá hoặc giá trị đã chỉ định, tuỳ thuộc vào phương thức sắp xếp theo bạn chọn.
endAt() Trả về các mục nhỏ hơn hoặc bằng khoá hoặc giá trị được chỉ định, tuỳ thuộc vào phương thức sắp xếp đã chọn.
endBefore() Trả về các mục nhỏ hơn khoá hoặc giá trị được chỉ định, tuỳ thuộc vào phương thức sắp xếp đã chọn.
equalTo() Trả về các mục bằng với khoá hoặc giá trị đã chỉ định, tuỳ thuộc vào phương thức sắp xếp theo bạn chọn.

Không giống như các phương thức sắp xếp, bạn có thể kết hợp nhiều hàm giới hạn hoặc hàm phạm vi. Ví dụ: bạn có thể kết hợp phương thức startAt()endAt() để giới hạn kết quả trong một phạm vi giá trị được chỉ định.

Giới hạn số lượng kết quả

Bạn có thể sử dụng các phương thức limitToFirst()limitToLast() để đặt số lượng tối đa các phần tử con cần đồng bộ hoá cho một sự kiện nhất định. Ví dụ: nếu bạn dùng limitToFirst() để đặt giới hạn là 100, thì ban đầu bạn chỉ nhận được tối đa 100 sự kiện child_added. Nếu bạn có ít hơn 100 mục được lưu trữ trong cơ sở dữ liệu Firebase, thì sự kiện child_added sẽ kích hoạt cho từng mục.

Khi các mục thay đổi, bạn sẽ nhận được các sự kiện child_added cho những mục xuất hiện trong truy vấn và các sự kiện child_removed cho những mục không còn xuất hiện trong truy vấn để tổng số vẫn là 100.

Ví dụ sau đây minh hoạ cách ứng dụng blog mẫu xác định một truy vấn để truy xuất danh sách 100 bài đăng gần đây nhất của tất cả người dùng:

Web

import { getDatabase, ref, query, limitToLast } from "firebase/database";

const db = getDatabase();
const recentPostsRef = query(ref(db, 'posts'), limitToLast(100));

Web

var recentPostsRef = firebase.database().ref('posts').limitToLast(100);

Ví dụ này chỉ xác định một truy vấn, để thực sự đồng bộ hoá dữ liệu, truy vấn cần có một trình nghe được đính kèm.

Lọc theo khoá hoặc giá trị

Bạn có thể dùng startAt(), startAfter(), endAt(), endBefore()equalTo() để chọn điểm bắt đầu, điểm kết thúc và điểm tương đương tuỳ ý cho các truy vấn. Điều này có thể hữu ích khi phân trang dữ liệu hoặc tìm các mục có phần tử con có một giá trị cụ thể.

Cách sắp xếp dữ liệu truy vấn

Phần này giải thích cách dữ liệu được sắp xếp theo từng phương thức sắp xếp theo thứ tự trong lớp Query.

orderByChild

Khi sử dụng orderByChild(), dữ liệu chứa khoá con được chỉ định sẽ được sắp xếp như sau:

  1. Những trẻ có giá trị null cho khoá con đã chỉ định sẽ xuất hiện trước.
  2. Tiếp theo là các phần tử con có giá trị false cho khoá con đã chỉ định. Nếu nhiều thành phần con có giá trị false, thì các thành phần con đó sẽ được sắp xếp theo thứ tự từ điển theo khoá.
  3. Tiếp theo là các phần tử con có giá trị true cho khoá con đã chỉ định. Nếu nhiều thành phần con có giá trị là true, thì các thành phần con đó sẽ được sắp xếp theo thứ tự từ điển theo khoá.
  4. Tiếp theo là các phần tử con có giá trị bằng số, được sắp xếp theo thứ tự tăng dần. Nếu nhiều phần tử con có cùng giá trị số cho nút con được chỉ định, thì chúng sẽ được sắp xếp theo khoá.
  5. Các chuỗi xuất hiện sau các số và được sắp xếp theo thứ tự từ điển tăng dần. Nếu nhiều phần tử con có cùng giá trị cho nút con được chỉ định, thì các phần tử con đó sẽ được sắp xếp theo thứ tự từ điển theo khoá.
  6. Các đối tượng xuất hiện sau cùng và được sắp xếp theo thứ tự từ điển theo khoá theo thứ tự tăng dần.

orderByKey

Khi bạn dùng orderByKey() để sắp xếp dữ liệu, dữ liệu sẽ được trả về theo thứ tự tăng dần theo khoá.

  1. Trẻ em có khoá có thể phân tích cú pháp dưới dạng số nguyên 32 bit sẽ xuất hiện trước, được sắp xếp theo thứ tự tăng dần.
  2. Tiếp theo là các phần tử con có giá trị chuỗi làm khoá, được sắp xếp theo thứ tự từ điển tăng dần.

orderByValue

Khi sử dụng orderByValue(), các thành phần con được sắp xếp theo giá trị của chúng. Tiêu chí sắp xếp giống như trong orderByChild(), ngoại trừ việc giá trị của nút được dùng thay vì giá trị của một khoá con được chỉ định.

Tách trình nghe

Bạn có thể xoá lệnh gọi lại bằng cách gọi phương thức off() trên tham chiếu cơ sở dữ liệu Firebase.

Bạn có thể xoá một trình nghe bằng cách truyền trình nghe đó làm tham số đến off(). Gọi off() trên vị trí mà không có đối số sẽ xoá tất cả trình nghe tại vị trí đó.

Việc gọi off() trên một trình nghe chính không tự động xoá các trình nghe đã đăng ký trên các nút con của trình nghe đó; bạn cũng phải gọi off() trên mọi trình nghe con để xoá lệnh gọi lại.

Các bước tiếp theo