so books

by Andrew Bales

通过安德鲁·巴尔斯

使用《纽约时报》和Google Books API建立畅销书清单 (Build a Best Sellers List with New York Times and Google Books API)

A single API may not always have all of the data you need. In this article, we’ll walk through the steps to combine two APIs by using unique identifiers from the New York Times API to grab book covers from the Google Books API.

单个API可能并不总是拥有您需要的所有数据。 在本文中，我们将通过使用“纽约时报” API的唯一标识符来获取Google图书API的书籍封面，从而逐步组合两个API。

You can find the full project on GitHub and view a demo on CodePen.

您可以在GitHub上找到完整的项目，并在CodePen 上查看演示。

Here are the steps we’ll cover:

以下是我们将介绍的步骤：

1. Fetch best selling books data from the New York Times API.从《纽约时报》 API获取最畅销的图书数据。
2. Append listings to the DOM.将列表追加到DOM。
3. Query the Google Books API with ISBN numbers to add cover images to the listings.使用ISBN号查询Google Books API，以将封面图像添加到清单中。

At the end of the tutorial, you’ll have a best sellers list! Here’s a peek:

在本教程的最后，您将获得畅销书列表！ 看一下：

等等，为什么呢？ (Wait, but why?)

I first began working on this project a little over a year ago. I was learning about APIs and requesting keys to practice accessing and displaying data.

一年多以前，我第一次开始从事这个项目。 我正在学习API，并请求密钥来练习访问和显示数据。

While exploring the New York Times API, I found that it was possible to get a list of best selling books. For each book on the list, the API provides a current rank and number of weeks on the list. It also offers info like a synopsis and an Amazon link.

在探索《纽约时报》 API时，我发现可以获得一份最畅销书的清单。 对于列表中的每本书，API都会提供列表中的当前排名和星期数。 它还提供简介和亚马逊链接之类的信息。

I was able to populate textual info, but the list lacked the natural visual component of book covers. At the time, I didn’t see a clear road forward, so I put the project on the shelf.

我能够填充文本信息，但该列表缺少书套的自然视觉组件。 当时，我看不到前进的路，所以我将项目搁置了。

This is an instance where having access to an API is helpful, but incomplete.

在这种情况下，访问API会有所帮助，但不完整。

This week, I returned with the goal of adding books covers. I found that Google Books API will return thumbnails for books when provided an ISBN, a unique identifying number. As luck would have it, the New York Times API provides that ISBN.

本周，我回来了，目的是增加书籍封面。 我发现，提供ISBN(唯一的识别号)后，Google Books API会返回书籍的缩略图。 幸运的是，《纽约时报》 API提供了ISBN。

We’re in business!

我们在做生意！

入门 (Getting Started)

First, we want to generate a list of the top selling fiction books with a bit of info about each. It would be nice to display information about how long the book has been on the list. We also need to see the cover and provide a link for users to learn more about the book or buy a copy.

首先，我们要生成最畅销的小说书的列表，并附上每本的一些信息。 显示有关该书已存在清单多久的信息会很好。 我们还需要查看封面并提供链接，以供用户了解有关这本书的更多信息或购买副本。

The New York Times API provides all of that information except for the book cover. Grab a free NYT API key to get started.

纽约时报 API提供了所有这些信息(书本封面除外)。 获取免费的NYT API密钥以开始使用。

We’ll use the Fetch API to get the best seller data for hardcover works of fiction:

我们将使用Fetch API来获取小说精装作品的最佳卖家数据：

fetch('https://api.nytimes.com/svc/books/v3/lists.json?list-name=hardcover-fiction&api-key=' + apiKey, {    method: 'get',  })  .then(response => { return response.json(); })  .then(json => { console.log(json); });

If you inspect the browser, you’ll see a JSON object logged in the console. If you haven’t used an API before, it will be helpful to spend a moment looking through this object. Burrowing into the data to access exactly what you’re looking for may take a while to get used to.

如果您检查浏览器，您将在控制台中看到一个JSON对象记录。 如果您以前没有使用过API，那么花一点时间浏览此对象将很有帮助。 浏览数据以完全访问您要寻找的内容可能需要一段时间才能习惯。

The response returns 15 objects within “results”. Each result is one book. For clarity, this example uses .forEach() to drill down into the API response nytimesBestSellers looping over each book.

响应在“结果”中返回15个对象。 每个结果都是一本书。 为了清楚起见，此示例使用.forEach()深入nytimesBestSellers循环在每本书上的API响应nytimesBestSellers 。

nytimesBestSellers.results.forEach(function(book) {  var isbn = book.isbns[1].isbn10;  var bookInfo = book.book_details[0];  var lastWeekRank = book.rank_last_week || ‘n/a’;  var weeksOnList = book.weeks_on_list || ‘New this week’;

// ...

});

As we loop over each individual book, the variables are set to the data for their specific listing, which we’ll use when making the entry.

当我们遍历每本书时，变量将设置为特定清单的数据，我们将在输入条目时使用它们。

In the code listing above,

在上面的代码清单中，

• the ISBN number is located within the book’s isbns array

  ISBN号位于该书的isbns数组内

• we select the 10-digit version of the ISBN number at book_details[0]

  我们在book_details[0]选择10位数字的ISBN号

• the last week ranking is at rank_last_week and defaults to ‘n/a’

  上周排名为rank_last_week ，默认为“ n / a”

• the number of weeks it has been on the best sellers list, is at weeks_on_list and defaults to “New this week” for books that appear on the list for the first time

  排在最畅销书清单上的周数，位于weeks_on_list ，对于首次出现在清单上的图书，默认为“本周新书”

Next, we can make an HTML object to append to the best-seller-titles list. Be sure your project includes jQuery. On CodePen, you can go to settings and add it in the JavaScript panel.

接下来，我们可以制作一个HTML对象以附加到best-seller-titles列表中。 确保您的项目包含jQuery 。 在CodePen上，您可以转到设置并将其添加到JavaScript面板中。

var listing =   '<div id="' + book.rank + '" class="entry">' +     '<p>' +       '<img src="" class="book-cover" id="cover-' + book.rank + '">' +     '</p>' +     '<h2><a href="' + book.amazon_product_url + '" target="_blank">' + bookInfo.title + '</a></h2>' +    '<h4>By ' + bookInfo.author + '</h4>' +    '<h4 class="publisher">' + bookInfo.publisher + '</h4>' +    '<p>' + bookInfo.description + '</p>' +     '<div class="stats">' +      '<hr>' +       '<p>Last Week: ' + lastWeekRank + '</p>' +       '<p>Weeks on list: ' + weeksOnList + '</p>' +    '</div>' +  '</div>';

$('#best-seller-titles').append(listing);

Notice that the image is left blank. On CodePen, I’ve added a placeholder image to fill in any undefined responses from Google.

请注意，图像保留为空白。 在CodePen上 ，我添加了一个占位符图像以填充来自Google的所有未定义响应。

Finally, we’ll can update the book rank number and pass along the rank and ISBN number to updateCover().

最后，我们将更新图书等级编号，并将等级和ISBN编号传递给updateCover() 。

$('#' + book.rank).attr('nyt-rank', book.rank);

updateCover(book.rank, isbn);

We can now write updateCover(), which will handle retrieving the thumbnail from the Google Books API.

现在，我们可以编写updateCover() ，它将处理从Google Books API检索缩略图的操作。

Google Books API (Google Books API)

We’ve gathered the textual parts of the listing, but to add a book cover, one of the easiest ways I came across was to call upon the Google Books API. Be sure to grab an API Key from the Google Books API.

我们已经收集了清单的文本部分，但是要添加书的封面，我遇到的最简单的方法之一就是调用Google Books API。 确保从Google图书API中获取API密钥。

Using the 10-digit ISBN number, we can get a thumbnail book cover image by again using fetch(). As before, we have to drill down into the object to find the single link referencing the thumbnail image we’re looking for:

使用10位ISBN号，我们可以再次使用fetch()获得缩略图的封面图像。 和以前一样，我们必须深入到对象中以找到引用我们正在寻找的缩略图的单个链接：

function updateCover(id, isbn) {  fetch('https://www.googleapis.com/books/v1/volumes?q=isbn:' + isbn + "&key=" + apiKey, {    method: 'get'  })  .then(response => { return response.json(); })  .then(data => {    var img = data.items[0].volumeInfo.imageLinks.thumbnail;    img = img.replace(/^http:\/\//i, 'https://');    $('#cover-' + id).attr('src', img);  })    .catch(error=> {       console.log(error);  });}

After the image is secured, replace() swaps any HTTP links to secure HTTPS versions. We then update the book cover by selecting the proper cover ID and updating its image source.

在对映像进行安全保护之后， replace()会将所有HTTP链接交换为安全的HTTPS版本。 然后，我们通过选择适当的封面ID并更新其图像来源来更新书的封面。

样式 (Style)

I’ve added additional styles with SASS. If you’re more comfortable with CSS or SCSS, use the drop down button in that window to compile the code.

我用SASS添加了其他样式。 如果您更喜欢CSS或SCSS，请使用该窗口中的下拉按钮来编译代码。

The last bit of JavaScript you’ll see controls the logo scaling. This code is triggered when the window scrolls. As the window scrolls down, the logo condenses from a height of 80px down to 35px.

您将看到JavaScript的最后一部分控制徽标缩放。 窗口滚动时触发此代码。 当窗口向下滚动时，徽标从80像素的高度向下压缩到35像素。

$(window).scroll(function (event) {  var scroll = $(window).scrollTop();  if (scroll > 50) {    $(‘#masthead’).css({‘height’:’50', ‘padding’ : ‘8’});    $(‘#nyt-logo’).css({‘height’:’35'});  } else {    $(‘#masthead’).css({‘height’:’100', ‘padding’:’10'});    $(‘#nyt-logo’).css({‘height’:’80'});  }});

最后的想法 (Final Thoughts)

It was exciting to return to a project and build on its features. While I may have approached this problem differently if I’d begun from scratch, this example shows a way to take a typical API call and add upon that work.

回到项目并建立其功能非常令人兴奋。 如果我从头开始可能会以不同的方式处理此问题，但此示例显示了一种进行典型API调用并添加该工作的方法。

In fact, one reason I particularly wanted to share this project was remembering how frustrating it could get for me when I first started working with APIs. I’d get overwhelmed with the documentation, not sure which features or syntax were leading me in the right direction. I often wished for a clear example or walk-through of something a touch beyond the Hello World.

实际上，我特别想分享这个项目的一个原因是，我想起了我刚开始使用API​​时对我来说有多沮丧。 我会对文档感到不知所措，不确定哪些功能或语法将我引向正确的方向。 我经常希望有一个清晰的例子，或者介绍一下Hello World之外的一些东西。

APIs each provide a specific service, and sometimes it’s necessary to combine them. This is just one way of bringing together multiple services, but I hope it’s a bit of inspiration for those exploring ways to combine APIs to create richer content.

每个API都提供特定的服务，有时需要将它们组合在一起。 这只是将多种服务组合在一起的一种方式，但是我希望对于那些探索将API组合起来以创建更丰富的内容的方式有所启发。

翻译自: https://www.freecodecamp.org/news/build-a-best-sellers-list-with-new-york-times-google-books-api-46201c30aec7/

so books