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

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Nhận tham chiếu cơ sở dữ liệu

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

Web version 9

import { getDatabase } from "firebase/database";

const database = getDatabase();

Web version 8

var database = firebase.database();

Đọc và ghi danh sách

Nối vào danh sách dữ liệu

Sử dụng phương thức push() để nối 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() tạo một khóa duy nhất mỗi khi một phần tử con mới được thêm vào tham chiếu Firebase đã chỉ định. Bằng cách sử dụng các khóa được tạo tự động này cho mỗi phần tử mới trong danh sách, một số ứng dụng khách có thể thêm 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 khi ghi. Khóa duy nhất được tạo bởi push() dựa trên dấu thời gian, do đó, các mục trong danh sách được sắp xếp tự động theo thứ tự thời gian.

Bạn có thể sử dụng tham chiếu đến dữ liệu mới được trả về bởi phương thức push() để nhận giá trị của khóa được tạo tự động của trẻ hoặc dữ liệu đặt cho trẻ. Thuộc tính .key của tham chiếu push() chứa khóa được tạo tự động.

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

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

Web version 9

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 version 8

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

Lắng nghe các sự kiện trẻ em

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

Biến cố Cách sử dụng điển hình
child_added Truy xuất danh sách các mục hoặc lắng nghe các bổ sung vào danh sách các mục. Sự kiện này được kích hoạt một lần cho mỗi con hiện có và sau đó lặp lại mỗi khi con mới được thêm vào đường dẫn đã chỉ định. Người nghe được chuyển qua một ảnh chụp nhanh có chứa dữ liệu của đứa trẻ mới.
child_changed Lắng nghe 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 kỳ khi nào nút con được sửa đổi. Điều này bao gồm bất kỳ sửa đổi nào đối với con cháu của nút con. Ảnh chụp nhanh được chuyển đến trình nghe sự kiện chứa dữ liệu cập nhật cho con.
child_removed Lắng nghe các mục bị xóa khỏi danh sách. Sự kiện này được kích hoạt khi một phần tử con ngay lập tức bị xóa. Ảnh chụp nhanh được chuyển tới khối gọi lại chứa dữ liệu cho phần tử con bị xóa.
child_moved Lắng nghe các thay đổi đối với thứ tự của các mục trong danh sách đã sắp xếp. sự kiện child_moved luôn theo sau sự kiện child_changed khiến thứ tự của mặt hàng thay đổi (dựa trên phương pháp đặt hàng hiện tại của bạn).

Mỗi thứ kết hợp với nhau có thể hữu ích cho việc lắng nghe 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 viết blog xã hội có thể sử dụng các phương pháp này cùng nhau để giám sát hoạt động trong các nhận xét của một bài đăng, như được hiển thị bên dưới:

Web version 9

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 version 8

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);
});

Lắng nghe các sự kiện giá trị

Mặc dù lắng nghe các sự kiện con là cách được khuyến nghị để đọc danh sách dữ liệu, nhưng có những tình huống lắng nghe các sự kiện giá trị trên danh sách tham chiếu là hữu ích.

Việc gắn trình quan sát 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à sau đó bạn có thể lặp lại để truy cập từng phần tử con.

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

Web version 9

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 version 8

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 phần tử con của một danh sách trong một thao tác duy nhất, thay vì lắng nghe các sự kiện bổ sung được thêm vào danh sách con.

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

Bạn có thể sử dụng lớp Query Cơ sở dữ liệu Thời gian thực để truy xuất dữ liệu được sắp xếp theo khóa, theo giá trị hoặc theo giá trị con. Bạn cũng có thể lọc kết quả đã sắp xếp thành một số kết quả cụ thể hoặc một loạt các khóa 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 pháp theo thứ tự để xác định cách sắp xếp kết quả:

Phương pháp Cách sử dụng
orderByChild() Thứ tự kết quả theo giá trị của khóa con được chỉ định hoặc đường dẫn con lồng nhau.
orderByKey() Thứ tự kết quả bằng khóa con.
orderByValue() Thứ tự kết quả theo giá trị con.

Bạn chỉ có thể sử dụng một phương pháp đặt hàng tại một thời điểm. Việc gọi một phương thức theo thứ tự nhiều lần trong cùng một truy vấn sẽ gây ra lỗi.

Ví dụ sau minh họa 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ố sao của họ:

Web version 9

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 version 8

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

Điều này xác định một truy vấn khi được kết hợp với trình nghe con sẽ đồng bộ hóa ứng dụng khách 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 ID người dùng của họ, được sắp xếp theo số sao mà mỗi bài đăng đã nhận được. Kỹ thuật sử dụng ID làm khóa chỉ mục này được gọi là quạt dữ liệu, bạn có thể đọc thêm về nó trong Cấu trúc cơ sở dữ liệu của bạn .

Lời gọi phương thức orderByChild() chỉ định khóa con để sắp xếp các 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 con "starCount" tương ứng. Các truy vấn cũng có thể được sắp xếp theo thứ tự các con lồng nhau, trong trường hợp bạn có dữ liệu giống 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 thứ tự các phần tử danh sách của mình theo các giá trị được lồng trong khóa metrics bằng cách chỉ định đường dẫn tương đối đến phần tử con lồng nhau trong lệnh gọi orderByChild() của chúng ta.

Web version 9

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

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

Web version 8

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 kiểu dữ liệu khác, hãy xem Cách dữ liệu truy vấn được sắp xếp .

Lọc dữ liệu

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

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

Không giống như các phương pháp theo thứ tự, bạn có thể kết hợp nhiều hàm giới hạn hoặc phạm vi. Ví dụ: bạn có thể kết hợp phương 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 limitToFirst()limitToLast() để đặt số lượng con tối đa được đồng bộ hóa cho một sự kiện nhất định. Ví dụ: nếu bạn sử 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 của mình, thì một sự kiện child_added kích hoạt cho từng mục.

Khi các mục thay đổi, bạn nhận được các sự kiện child_added cho các mục nhập truy vấn và sự kiện child_removed cho các mục bỏ ra khỏi mục đó để tổng số vẫn ở mức 100.

Ví dụ sau minh họa cách ứng dụng viết blog mẫu xác định 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 version 9

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

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

Web version 8

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

Ví dụ này chỉ định nghĩa một truy vấn, để thực sự đồng bộ hóa dữ liệu, nó cần có một trình lắng nghe đính kèm.

Lọc theo khóa hoặc giá trị

Bạn có thể sử dụng startAt() , startAfter() , endAt() , endBefore()equalTo() để chọn các điểm bắt đầu, kết thúc và điểm tương đương tùy ý cho các truy vấn. Điều này có thể hữu ích cho việc phân trang dữ liệu hoặc tìm các mục có con có 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 theo thứ tự trong lớp Query .

orderByChild

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

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

orderByKey

Khi sử dụng orderByKey() để sắp xếp dữ liệu của bạn, dữ liệu được trả về theo thứ tự tăng dần theo từng khóa.

  1. Các con có khóa có thể được phân tích cú pháp dưới dạng số nguyên 32 bit đứng trước, được sắp xếp theo thứ tự tăng dần.
  2. Các con có giá trị chuỗi làm khóa tiếp theo, được sắp xếp theo từ vựng theo thứ tự tăng dần.

orderByValue

Khi sử dụng orderByValue() , các 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ừ giá trị của nút được sử dụng thay vì giá trị của khóa con được chỉ định.

Tách người nghe

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

Bạn có thể loại bỏ một trình nghe bằng cách chuyển nó dưới dạng tham số cho off() . Gọi off() trên vị trí không có đối số sẽ xóa tất cả người nghe tại vị trí đó.

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

Bước tiếp theo