[Video Summary] Ch. 6.6 Loading Paged JSON while Scrolling in SwiftUI (2024)

Mô tả nhanh

Video này hướng dẫn cách tải dữ liệu JSON theo trang khi người dùng cuộn trang trong SwiftUI, sử dụng một API Pokemon để minh họa. Video cũng trình bày cách đánh số các mục trong danh sách, hiển thị tổng số mục đã tải và tổng số mục có sẵn, và xử lý lỗi JSON khi không có dữ liệu trang tiếp theo.

Video

Click vào hình dưới để mở:

Mô tả chi tiết

Video này hướng dẫn cách tải dữ liệu JSON theo trang khi người dùng cuộn trang trong SwiftUI, sử dụng một API Pokemon để minh họa.

Các bước thực hiện:

1. Đánh số các Pokémon:
   • Thay vì duyệt mảng creatures trực tiếp, sử dụng 0..<creatures.creatureArray.count để có index.
   • Sử dụng index để truy cập từng creature trong mảng creatures.creatureArray.
   • Thêm số thứ tự vào trước tên Pokémon bằng cách sử dụng string interpolation và index + 1.
2. Thêm Toolbar hiển thị số lượng đã tải và tổng số:
   • Sử dụng .toolbar modifier cho List, với placement: .status để hiển thị thông tin ở cuối màn hình.
   • Hiển thị số lượng Pokemon đã tải (creatures.creaturesArray.count) và tổng số Pokemon (creatures.count từ API).
3. Tải thêm trang khi cuộn:
   • Sử dụng LazyVStack bao quanh NavigationLink để task modifier chỉ được gọi khi view đó xuất hiện trên màn hình.
   • Sử dụng .task modifier để kiểm tra khi một item cuối cùng trong danh sách xuất hiện.
   • Kiểm tra xem item đang hiển thị có phải là item cuối cùng trong creaturesArray hay không bằng cách so sánh thuộc tính name.
   • Kiểm tra xem URLString có bắt đầu bằng "http" hay không (để đảm bảo có trang tiếp theo để tải).
   • Gọi hàm getData() để tải trang tiếp theo.
4. Cập nhật mảng creaturesArray:
   • Trong getData(), thay vì gán trực tiếp self.creaturesArray = returned.results, hãy thêm kết quả mới vào mảng hiện tại: self.creaturesArray += returned.results.
5. Xử lý lỗi khi không có trang tiếp theo:
   • Khi không có trang tiếp theo, giá trị next trong JSON sẽ là null.
   • Thay đổi kiểu dữ liệu của next trong Return struct thành String? (optional string).
   • Sử dụng return.next ?? "" để gán giá trị nếu next có giá trị và gán string rỗng nếu nó là nil, tránh lỗi decode JSON.
6. (Quan trọng) Đảm bảo cập nhật UI trên main thread:
   • Sử dụng Task { @MainActor in ... } khi cập nhật các thuộc tính của class (ví dụ creaturesArray, URLString) để đảm bảo chúng được cập nhật trên main thread, tránh lỗi UI khi data được load ở background thread.

Lời chúc

Chúc bạn có những kiến thức hữu ích từ video này. Đừng quên like và subscribe để theo dõi các video tiếp theo nhé!