Автор оригинала: FreeCodeCamp Community Member.
от JS.
JavaScript имеет встроенные методы, которые позволяют легко получить и манипулировать данными с внешнего API. Я прогулюсь по практическому примеру от одного из моих текущих проектов, которые вы можете использовать в качестве шаблона при запуске чего-либо собственного.
Для этого упражнения мы рассмотрим текущие данные по размещению работы для нью-йоркских агентств. Нью-Йорк отлично подходит для публикации Все виды наборов данных , но я выбрал этот конкретный, потому что он не требует борьбы с ключами API – конечная точка – это общедоступный URL.
Во-первых, мы получим данные с серверов New York City, используя API agetch apets javascript. Это хороший способ начать работать с Обещания Отказ Я пойду на самые голые основы здесь, но рекомендую отличный иллюстрированный блог Mariko Kosaka Обещание партии бургера для более тщательного (и вкусно) грунтовки.
Если вы когда-либо использовали $ .getjson () В JQuery вы в основном там концептуально. Посмотрите на код ниже:
const cityJobsData = fetch('https://data.cityofnewyork.us/resource/swhp-yxa4.json');Мы объявляем переменную, CityJobsdata, и установить его значение на fetch (URL, который содержит данные, которые мы хотим) который возвращает то, что называется обещанием. На данный момент, просто подумайте о обещании, как данные, которые мы будем в конце концов Вернитесь от URL, когда запрос завершен. Мы можем получить доступ и манипулировать этими данными после того, как он загружается впоследствии вызывает тогда () на CityJobsdata Отказ Для выполнения нескольких операций мы можем поддерживать цепочку тогда () Вместе, убедившись, что мы 1) всегда проходите в наших данных как аргумент обратного вызова, а 2) вернуть значение.
const cityJobsData = fetch('https://data.cityofnewyork.us/resource/swhp-yxa4.json');cityJobsData .then(data => data.json())
В приведенном выше фрагменте мы говорим компьютеру выполнить все, содержащееся внутри тогда () Как только данные извлекаются с URL Отказ Это то, что мы называем «асинхронный» код. В этом случае .then (data => data.json ()) Возвращает данные в формате json, что позволит нам работать на нем.
Быть помимо пробои для хранения огромных количеств JSON: если вы идете в свой веб-браузер к URL, который содержит данные, которые мы хотим , вы увидите огромный, неформатированный блок текста, который очень трудно читать. Тем не менее, вы можете скопировать и вставить этот текст во что-то вроде jsonviewer.stack.hu Отказ Это покажет вам организованный и иерархический обзор содержания.
Допустим, мы хотим увидеть, сколько проводков есть для каждого городского агентства. Если мы посмотрим на нашу схему JSON в этом зрителе, мы видим, что это массив объектов. Каждый объект содержит все данные, которые составляют одну запись задания.
Обратите внимание, что каждый объект содержит ключ, агентство , чья ценность – это название городского агентства, которое имеет доступную работу.
Поэтому, если мы можем каким-то образом следить за тем, сколько раз каждое агентство упоминается на протяжении всего этого массива объектов, мы сможем узнать, сколько рабочих мест в настоящее время доступна на агентство.
Один из способов подсчитать рабочие места на агентство – использовать Уменьшить () Отказ От MDN , «Метод under () метод применяет функцию против аккумулятора и каждого элемента в массиве (слева направо), чтобы уменьшить его в одно значение.” Если это звучит как куча ерунды к вам, не волнуйся! Это более понятно с примером.
Большинство введений в Уменьшить () Привлекайте простое дополнение, которое является точной отправной точкой. Давайте пройдем через этот пример вместе:
const arr = [1, 2, 4, 6];const added = arr.reduce((accumulator, item) => { return accumulator + item;}, 0);console.log(added); // 13
Вот как это работает: Уменьшить () Функциональные петли через массив, arr и добавляет каждого Предмет на аккумулятор. Аккумулятор имеет начальное значение 0 Это набор с Уменьшить () второй аргумент, после функции обратного вызова. Текущее значение аккумулятора возвращается в конце каждого цикла, в котором происходит добавление. Таким образом, окончательное значение добавлено 13.
Если у вас проблемы с визуализацией, попробуйте добавить console.log () Заявление перед возвратом, который выводит текущие значения аккумулятора и элемента. Таким образом, вы сможете увидеть петли, которые происходят за кулисами. Вот набор операторов журнала для приведенного выше примера:
adding 1 to accumulator: 0adding 2 to accumulator: 1adding 4 to accumulator: 3adding 6 to accumulator: 7
Это все хорошо и хорошо, и это весело сделать добавление с * ~ `* функциональным программированием *` ~ *, но вы знали, вы знали Уменьшить () можно сделать больше, чем просто считать вещи? И что аккумулятор может быть чем-то другим, чем число?
Вы можете сделать всевозможные классные вещи с Уменьшить () – Это как швейцарский армейский нож. В нашем случае мы будем использовать его, чтобы выяснить, сколько существующих публикаций вакансий есть в Нью-Йоркском агентстве. Это может показаться большим скачком от простого добавления номеров вместе, но основные концепции петли и накопления одинаковы.
На этот раз вместо уменьшения массива четырех чисел, мы хотим сократить нашу JSON Blob данных публикации данных. И вместо того, чтобы уменьшить до одного числа, мы собираемся уменьшить до одного объект Отказ Да, объект! Как только функция будет завершена, ключевые ключи объекта аккумулятора будут названиями городских агентств, а значения ключей будут иметь количество сообщений, которые они имеют, как это: {«Название агентства»: количество положений вакансий} Отказ Вот вся программа:
Как эта работа, точно? Давайте сломаемся. Каждый раз вокруг петли мы смотрим на конкретные ценность , то есть один объект в данные наш вышеупомянутый массив объектов. Мы проверяем, если ключ с именем текущего агентства ( 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 ! Теперь мы знаем, что если мы хотим работать в правительстве Нью-Йорка, мы должны проверить кафедру здравоохранения и 247 открытий в области здравоохранения и ментальной гигиены!
Мы можем сделать кучу полезных вещей с этими данными – лично я хочу окунуть ноги в визуализацию данных, поэтому я буду использовать его, чтобы сделать простую таблицу. Я надеюсь, что вы сможете использовать этот пример в качестве точки прыжка для ваших собственных проектов.
Если вам понравилось эту статью, пожалуйста, обратитесь к мне на Twitter !
Благодаря Джим О’Брайен для редактирования.