从外部API获取，还原和格式化数据的实用指南 (A practical guide to fetch(), reduce() and formatting data from an external API)

JavaScript has built-in methods that make it easy to get and manipulate data from an external API. I’ll walk through a practical example from one of my current projects that you can use as a template when starting something of your own.

JavaScript具有内置方法，可以轻松地从外部API获取和操作数据。我将通过当前项目中的一个实际示例进行讲解，您可以在启动自己的项目时将其用作模板。

For this exercise, we will look at current job posting data for New York City agencies. New York City is great about publishing , but I chose this particular one because it doesn’t require dealing with API keys — the endpoint is a publicly accessible URL.

在本练习中，我们将查看纽约市代理商的当前职位发布数据。纽约市非常擅长发布，但是我选择了这一特定，因为它不需要处理API密钥-端点是可公开访问的URL。

First, we’ll get the data from New York City’s servers by using JavaScript’s Fetch API. It’s is a good way to start working with . I’ll go over the very bare basics here, but I recommend Mariko Kosaka’s excellent illustrated blog for a more thorough (and delicious) primer.

首先，我们将使用JavaScript的Fetch API从纽约市的服务器中获取数据。这是开始的好方法。我将在这里介绍最基本的知识，但我建议小坂麻理子(Mariko Kosaka)出色的插图博客获取更全面(更美味)的入门知识。

If you’ve ever used $.getJSON() in jQuery, you’re mostly there conceptually. Take a look at the code below:

如果您曾经在jQuery中使用$.getJSON() ，那么从概念上讲，您几乎就在那儿。看下面的代码：

const cityJobsData =   fetch('https://data.cityofnewyork.us/resource/swhp-yxa4.json');

We declare a variable, cityJobsData, and set its value to fetch(the URL that contains the data we want) which returns something called a promise. For now, just think of a promise as the the data we will eventually get back from the URL when the request is complete. We can access and manipulate this data once it loads by subsequently calling then() on cityJobsData. To perform multiple operations, we can keep chaining then() together, making sure we 1) always pass in our data as an argument to the callback, and 2) return a value.

我们声明一个变量cityJobsData,并将其值设置为fetch(the URL that contains the data we want) ，该操作返回一个称为promise的东西。现在，仅将诺言视为请求完成后我们最终将从URL返回的数据。加载之后，我们可以通过随后在cityJobsData上调用then()来访问和操纵此数据。要执行多个操作，我们可以将then()链接在一起，确保我们1)始终将数据作为回调的参数传入，以及2)返回一个值。

const cityJobsData = fetch('https://data.cityofnewyork.us/resource/swhp-yxa4.json');

cityJobsData  .then(data => data.json())

In the above snippet, we’re telling the computer to execute everything contained inside then() once the data is retrieved from the URL. This is what we call ‘asynchronous’ code. In this case,.then(data => data.json()) returns the data in JSON format, which will allow us to operate on it.

在以上代码段中，我们告诉计算机一旦从URL中检索了数据， then()执行then()包含的所有内容。这就是我们所说的“异步”代码。在这种情况下， .then(data => data.json ())以JSON格式返回数据，这将允许我们对其进行操作。

A quick aside for wrangling huge amounts of JSON: If you go in your web browser to the , you’ll see an enormous, unformatted block of text that is very hard to read. However, you can copy and paste that text into something like . It will show you an organized and hierarchical overview of the contents.

快速处理大量JSON：如果在Web浏览器中转到的，您将看到一个巨大的，无格式的文本块，很难阅读。但是，您可以将文本复制并粘贴到类的。它将向您显示内容的组织化和层次化概述。

Let’s say we want to see how many postings there are for each city agency. If we look at our JSON schema in this viewer, we can see that it’s an array of objects. Each object contains all the data that makes up a single job posting.

假设我们要查看每个城市代理商的发布数量。如果在此查看器中查看JSON模式，我们可以看到它是一个对象数组。每个对象都包含构成单个职位发布的所有数据。

Note that each object contains a key, agency, whose value is the name of the city agency that has a job available.

请注意，每个对象都包含一个关键字agency ，其值是可以提供工作的城市代理商的名称。

Therefore, if we can somehow keep track of how many times each agency is mentioned throughout this array of objects, we’ll be able to know how many jobs are currently available per agency.

因此，如果我们能够以某种方式跟踪在整个对象数组中每个代理商被提及的次数，我们将能够知道每个代理商当前有多少个职位。

One way to count the jobs per agency is to use reduce(). , “The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.” If this sounds like a bunch of nonsense to you, don’t worry! It’s more clear with an example.

计算每个代理商的职位的一种方法是使用reduce() 。，“ reduce()方法对累加器和数组中的每个元素(从左到右)应用一个函数，以将其减小为单个值。” 如果这听起来像是胡说八道，请不用担心！用一个例子更清楚。

Most introductions to reduce() involve simple addition, which is a fine starting point. Let’s walk through this example together:

大多数reduce()介绍都涉及简单的加法，这是一个很好的起点。让我们一起看一下这个例子：

const arr = [1, 2, 4, 6];const added = arr.reduce((accumulator, item) => { return accumulator + item;}, 0);

console.log(added); // 13

Here’s how it works: the reduce() function loops through the array, arr, and adds each item to an accumulator. The accumulator has an initial value of 0 that’s set with reduce()'s second argument, after the callback function. The accumulator’s current value is returned at the end of every loop, which is how the adding happens. Thus, the final value of added is 13.

它是这样工作的： reduce()函数循环遍历数组arr ，并将每item添加到累加器。累加器的初始值为0 ，该值是在回调函数之后使用reduce()的第二个参数设置的。累加器的当前值在每个循环结束时返回，这就是加法的过程。因此， added的最终值为13。

If you’re having trouble visualizing this, try adding a console.log() statement before your return that outputs the current values of the accumulator and the item. This way, you’ll be able to see the looping that’s happening behind the scenes. Here’s a set of log statements for the above example:

如果您在可视化方面遇到困难，请尝试在返回之前添加console.log()语句，以输出累加器和项目的当前值。这样，您将能够看到幕后发生的循环。这是上述示例的一组日志语句：

adding 1 to accumulator: 0adding 2 to accumulator: 1adding 4 to accumulator: 3adding 6 to accumulator: 7

This is all well and good, and it’s fun to do some addition with *~`*functional programming*`~*, but did you know reduce() can do more than simply count things? And that the accumulator can be something other than a number?

这一切都很好，也很有趣，通过*〜`*函数式编程*`〜*做一些加法很有趣，但是您知道reduce()可以做的不仅仅是计数事情吗？累加器可以不是数字吗？

You can do all sorts of cool stuff with reduce() — it’s like a Swiss Army Knife. In our case, we’ll use it to find out how many current job postings there are per New York City agency. This might seem like a big leap from simply adding numbers together, but the core concepts of looping and accumulating are the same.

您可以使用reduce()各种有趣的工作-就像瑞士军刀一样。在我们的案例中，我们将使用它来查找每个纽约市代理商当前有多少个职位发布。从简单地将数字加在一起看来，这似乎是一个巨大的飞跃，但是循环和累加的核心概念是相同的。

This time, instead of reducing an array of four numbers, we want to reduce our JSON blob of job posting data. And instead of reducing to a single number, we’re going to reduce to a single object. Yes, an object! Once the function is completed, the accumulator object’s keys will be the names of the city agencies and the keys’ values will be the number of postings they have, like this: {"name of agency": number of job postings}. Here’s the whole program:

这次，我们要减少工作发布数据的JSON Blob，而不是减少四个数字的数组。而不是减少为一个单一的数字，我们将减少为一个单一的对象。是的，一个物体！功能完成后，累加器对象的键将是城市代理商的名称，键的值将是城市代理商的名称，例如： {"name of agency": number of job postings} 。这是整个程序：

How does this work, exactly? Let’s break it down. Each time around the loop, we’re looking at a specific value, i.e., one object in data, our aforementioned array of objects. We’re checking to see if a key with the name of the current agency (value.agency) already exists within our accumulator object. If not, we add it to the accumulator object and set its value to 1. If a key with the name of the current agency already exists within the accumulator object, we add 1 to its existing value. We return the accumulator object when we’re done and get this nice set of data:

究竟如何运作？让我们分解一下。每次循环时，我们都会查看一个特定value ，即data一个对象，即上述对象数组。我们正在检查累加器对象中是否已存在具有当前代理名称( value.agency )的键。如果不是，则将其添加到累加器对象并将其值设置为1。如果在累加器对象中已经存在具有当前代理名称的键，则将其现有值加1。完成后，我们返回累加器对象，并获得以下良好的数据集：

{ 'FIRE DEPARTMENT': 17,  'DEPT OF ENVIRONMENT PROTECTION': 134,  'DEPARTMENT OF INVESTIGATION': 22,  'DEPARTMENT OF SANITATION': 14,  'DEPT OF HEALTH/MENTAL HYGIENE': 247,  'OFFICE OF THE COMPTROLLER': 14,  'ADMIN FOR CHILDREN\'S SVCS': 43,  'DEPT OF DESIGN & CONSTRUCTION': 48,  'ADMIN TRIALS AND HEARINGS': 16,  'DEPT OF PARKS & RECREATION': 34,  'HUMAN RIGHTS COMMISSION': 4,  'POLICE DEPARTMENT': 36,  'DEPT OF INFO TECH & TELECOMM': 50,  'DISTRICT ATTORNEY KINGS COUNTY': 4,  'TAXI & LIMOUSINE COMMISSION': 11,  'HOUSING PRESERVATION & DVLPMNT': 21,  'DEPARTMENT OF BUSINESS SERV.': 18,  'HRA/DEPT OF SOCIAL SERVICES': 31,  'DEPARTMENT OF PROBATION': 3,  'TAX COMMISSION': 4,  'NYC EMPLOYEES RETIREMENT SYS': 6,  'OFFICE OF COLLECTIVE BARGAININ': 2,  'DEPARTMENT OF BUILDINGS': 9,  'DEPARTMENT OF FINANCE': 29,  'LAW DEPARTMENT': 21,  'DEPARTMENT OF CORRECTION': 12,  'DEPARTMENT OF TRANSPORTATION': 67,  'DEPT OF YOUTH & COMM DEV SRVS': 5,  'FINANCIAL INFO SVCS AGENCY': 7,  'CULTURAL AFFAIRS': 1,  'OFFICE OF EMERGENCY MANAGEMENT': 12,  'DEPARTMENT OF CITY PLANNING': 5,  'DEPT OF CITYWIDE ADMIN SVCS': 15,  'DEPT. OF HOMELESS SERVICES': 3,  'DEPARTMENT FOR THE AGING': 2,  'CONSUMER AFFAIRS': 7,  'MAYORS OFFICE OF CONTRACT SVCS': 7,  'DISTRICT ATTORNEY RICHMOND COU': 3,  'NYC HOUSING AUTHORITY': 9,  'CIVILIAN COMPLAINT REVIEW BD': 5,  'OFF OF PAYROLL ADMINISTRATION': 1,  'EQUAL EMPLOY PRACTICES COMM': 1 }

Et Voila! We now know that if we want to work for New York City’s government, we should check out the Department of Health and Mental Hygiene’s 247 openings!

等等！现在我们知道，如果我们想为纽约市政府工作，我们应该查看卫生和心理卫生部的247个职位！

We can do a bunch of useful things with this data — personally, I want to dip my toes into data visualization, so I’ll be using it to make a simple chart. I hope you’ll be able to use this example as a jumping-off point for your own projects.

我们可以使用这些数据做很多有用的事情-就个人而言，我想将自己的脚趾插入数据可视化中，因此我将使用它来制作一个简单的图表。希望您能够将此示例用作自己项目的起点。

If you enjoyed this article, please reach out to me on !

如果您喜欢这篇文章，请在与我联系！

Thanks to for editing.

感谢的编辑。