Xây dựng danh sách người bán hàng tốt nhất với New York Times và Google Books API

Một API duy nhất có thể không phải lúc nào cũng có tất cả dữ liệu bạn cần. Trong bài viết này, chúng tôi sẽ hướng dẫn các bước để kết hợp hai API bằng cách sử dụng các mã định danh duy nhất từ API New York Times để lấy bìa sách từ API Google Sách.
Bạn có thể tìm thấy toàn bộ dự án trên GitHub và xem bản demo trên CodePen.
Dưới đây là các bước chúng tôi bao gồm:
- Lấy dữ liệu sách bán chạy nhất từ API New York Times.
- Nối các danh sách vào DOM.
- Truy vấn API Google Sách bằng số ISBN để thêm ảnh bìa vào danh sách.
Vào cuối hướng dẫn, bạn sẽ có một danh sách người bán hàng tốt nhất! Đây là một cái nhìn trộm:

Chờ đã, nhưng tại sao?
Lần đầu tiên tôi bắt đầu làm việc với dự án này hơn một năm trước. Tôi đã học về API và yêu cầu các khóa để thực hành truy cập và hiển thị dữ liệu.
Trong khi khám phá API của New York Times, tôi thấy rằng có thể có được một danh sách các cuốn sách bán chạy nhất. Đối với mỗi cuốn sách trong danh sách, API cung cấp thứ hạng và số tuần hiện tại trong danh sách. Nó cũng cung cấp thông tin như tóm tắt và liên kết Amazon.
Tôi đã có thể điền thông tin văn bản, nhưng danh sách thiếu thành phần hình ảnh tự nhiên của bìa sách. Lúc đó, tôi đã thấy một con đường rõ ràng phía trước, vì vậy tôi đã đặt dự án lên kệ.
Đây là một ví dụ trong đó việc có quyền truy cập vào API là hữu ích, nhưng không đầy đủ.
Tuần này, tôi trở lại với mục tiêu thêm bìa sách. Tôi thấy rằng Google Sách API sẽ trả lại hình thu nhỏ cho sách khi được cung cấp một mã số, một số nhận dạng duy nhất. Vì may mắn sẽ có nó, API của Thời báo New York cung cấp mã số đó.
Chúng tôi làm kinh doanh!
Bắt đầu
Đầu tiên, chúng tôi muốn tạo một danh sách các cuốn sách viễn tưởng bán chạy nhất với một chút thông tin về mỗi cuốn sách. Sẽ thật tuyệt khi hiển thị thông tin về thời gian cuốn sách nằm trong danh sách. Chúng tôi cũng cần xem bìa và cung cấp một liên kết để người dùng tìm hiểu thêm về cuốn sách hoặc mua một bản sao.
API của Thời báo New York cung cấp tất cả thông tin đó ngoại trừ bìa sách. Lấy khóa API NYT miễn phí để bắt đầu.
Chúng tôi sẽ sử dụng API Fetch để có được dữ liệu bán chạy nhất cho các tác phẩm hư cấu bìa cứng:
tìm nạp ('https://api.nytimes.com/svc/books/v3/lists.json?list-name=hardcover-fiction&api-key=' + apiKey, { phương thức: 'nhận', }) .then (hồi đáp => {return answer.json ();}) .then (json => {console.log (json);});
Nếu bạn kiểm tra trình duyệt, bạn sẽ thấy một đối tượng JSON được ghi lại trong bảng điều khiển. Nếu bạn đã sử dụng API trước đó, sẽ rất hữu ích khi dành một chút thời gian để xem qua đối tượng này. Truy cập dữ liệu để truy cập chính xác những gì bạn đang tìm kiếm có thể mất một thời gian để làm quen.
Phản hồi trả về 15 đối tượng trong kết quả của hệ thống. Mỗi kết quả là một cuốn sách. Để rõ ràng, ví dụ này sử dụng .forEach () để đi sâu vào phản hồi API nytimesBestSeller lặp trên mỗi cuốn sách.
nytimesBestSeller.results.forEach (chức năng (sách) { var isbn = book.vdns [1] .vdn10; var bookInfo = book.book_details [0]; var lastWeekRank = book.rank_last_week || ‘N / a var weekOnList = book.week_on_list || ‘Mới trong tuần này;
// ...
});
Khi chúng tôi lặp qua từng cuốn sách riêng lẻ, các biến được đặt thành dữ liệu cho danh sách cụ thể của chúng, mà chúng tôi sẽ sử dụng khi thực hiện mục nhập.
Trong danh sách mã ở trên,
- số ISBN nằm trong mảng Sách isbns
- chúng tôi chọn phiên bản gồm 10 chữ số của số ISBN tại book_details [0]
- thứ hạng tuần trước là tại Rank_last_week và mặc định là ‘n / a
- số tuần đã có trong danh sách bán chạy nhất, là vào tuần_on_list và mặc định cho Tuần mới trong tuần này đối với những cuốn sách xuất hiện lần đầu tiên trong danh sách
Tiếp theo, chúng ta có thể tạo một đối tượng HTML để thêm vào danh sách tiêu đề bán chạy nhất. Hãy chắc chắn rằng dự án của bạn bao gồm jQuery. Trên CodePen, bạn có thể vào cài đặt và thêm nó vào bảng điều khiển JavaScript.
danh sách var = '