Перейти к содержимому

Как использовать json в javascript

  • автор:

Методы JavaScript JSON, toJSON

JavaScript Object Notation (JSON) — это заметный формат для представления объектов и значений. Изначально этот формат был создан для JavaScript, но несколько языков также включают библиотеки для его обработки. Следовательно, использование JSON для обмена данными проще в случае, если клиент использует JavaScript, а сервер написан на PHP, Ruby, Java и т. д.

В целом, JavaScript предлагает два метода преобразования: JSON.stringify и JSON.parse . Первый можно использовать для преобразования объектов в JSON, а второй — для преобразования JSON обратно в объект.

JSON.stringify

Рассмотрим следующий пример использования JSON.stringify :

JSON stringify in javascript
Run > Reset

Пожалуйста, учтите, что JSON-закодированный объект отличается от литерала объекта. Главные различия следующие:

  1. Строка использует двойные кавычки. В JSON не должно быть одиночных кавычек или обратных кавычек. Например, ‘W3Docs’ становится «W3Docs».
  2. Двойные кавычки следует использовать также для имен свойств объекта. Это обязательно. Например, booksCount : 4 станет «booksCount»: 4.

Вы можете применить метод JSON.stringify также к примитивам. Он поддерживает следующие типы данных:

  • Массивы [ . ]
  • Объекты
  • Примитивы (числа, строки, булевы значения и null).

JSON stringify in javascript

// a JSON number is an ordinary number console.log(JSON.stringify(10)) // 10 // a JSON string is a double-quoted string console.log(JSON.stringify([1, 2, 3])); // [1,2,3] console.log(JSON.stringify(false)); // false console.log(JSON.stringify(‘W3Docs’)) // «W3Docs»

Run > Reset

Обратите внимание, что JSON.stringify пропускает некоторые объекты, специфичные для JavaScript, такие как функциональные свойства (методы), символьные свойства и свойства, хранящие undefined .

Давайте рассмотрим следующий случай:

JSON stringify in javascript

let site = < welcome() < // ignore console.log("Welcome"); >, [Symbol(«id»)]: 10, // ignore someProperty: undefined // ignore >; console.log(JSON.stringify(site)); // <> — empty object

Run > Reset

Самое лучшее в этом — то, что вложенные объекты автоматически поддерживаются и преобразуются.

JSON stringify with nested objects javascript
let site = < name: "W3Docs", books: < booksCount: 4, booksTitle: ["html", "css", "js", "git"] >>; console.log(JSON.stringify(site)); /* The whole structure is stringified: < "name":"W3Docs", "book":<"booksCount":4,"booksTitle":["html","css", "js", "git"]>, > */
Run > Reset

Но есть и существенное ограничение: вы не должны использовать циклические ссылки.

Javascript json stringify objects not use circular references

let books = < booksCount: 4 >; let site = < name: "W3Docs", booksTitle: ["html", "css", "js", "git"] >; site.tutorial = books; // site references books books.canUse = site; // books references site console.log(JSON.stringify(site)); // Error: Converting circular structure to JSON

Run > Reset

Исключение и Преобразование: replacer

Для JSON.stringify используется следующий полный синтаксис:

let json = JSON.stringify(value[, replacer, space])

У него три аргумента:

  • значение: значение для кодирования;
  • replacer: массив свойств для кодирования или функция отображения функция(key, value); ;
  • пробел: количество пробелов, используемых для форматирования.

JSON.stringify большую часть времени использует первый аргумент. Но если вы хотите улучшить свой процесс замены, вы также можете использовать второй аргумент. Если массив свойств передан ему, то кодируются только эти свойства.

Давайте посмотрим на пример:

JSON stringify in javascript

let books = < booksCount: 4 >; let site = < name: "W3Docs", booksTitle: [< title: "html" >, < title: "css" >, < title: "js" >, < title: "git" >], tutorial: books // tutorial references books >; books.canUse = site; // books references site console.log(JSON.stringify(site, [‘name’, ‘booksTitle’])); // <"name":"W3Docs","booksTitle":[<>,<>,<>,<>]>

Run > Reset
JSON stringify javascript
Run > Reset

Теперь давайте попробуем добавить в список все свойства, за исключением books.free :

Как вы видите, все сериализуется, кроме canUse . Также заметно, что приведенный список выглядит довольно длинным. К счастью, может быть вызвана функция replacer . Вы можете вызвать ее для каждой пары key , value , и может быть возвращено “замененное” значение. Вы можете использовать его вместо исходного значения. Для игнорирования canUse в приведенном ниже примере возвращается undefined :

JSON stringify in javascript

let books = < booksCount: 4 >; let site = < name: "W3Docs", booksTitle: [< title: "html" >, < title: "css" >, < title: "js" >, < title: "git" >], tutorial: books // site references books >; books.canUse = site; // books references site console.log(JSON.stringify(site, function replacer(key, value) < console.log(`$: $`); return (key == ‘canUse’) ? undefined : value; >)); /* key:value pairs that come to replacer: : [object Object] name: W3Docs booksTitle: [object Object],[object Object],[object Object],[object Object] 0: [object Object] title: html 1: [object Object] title: css 2: [object Object] title: js 3: [object Object] title: git tutorial: [object Object] booksCount: 4 */

Run > Reset

Учтите, что функция replacer получает любую пару ключ / значение вместе с элементами массива и вложенными объектами.

Форматирование:пробел

Как уже упоминалось, у JSON.stringify есть три аргумента. Третий — количество пробелов, используемых для форматирования. Обычно разработчики используют аргумент space для достижения отличного вывода.

space = 2 приказывает JavaScript отображать вложенные объекты на разных строках с отступом в два пробела внутри объекта.

JSON stringify javascript
Run > Reset

Пользовательский “ toJSON ”

Как правило, объект может предоставить метод toJSON для реализации преобразования to-JSON . Если он доступен, JSON.stringify автоматически вызывает его.

JSON stringify javascript
let books = < booksCount: 4 >; let site = < name: "W3Docs", update: new Date(Date.UTC(2020, 1, 2)), books >; console.log(JSON.stringify(site)); /* < "name":"W3Docs", "update":"2020-02-02T00:00:00.000Z", // (1) "books": <"booksCount":4 >// (2) > */
Run > Reset

В приведенном выше случае update (1) преобразуется в строку. Причина в том, что все даты имеют встроенный метод toJSON .

Если вы добавите пользовательский toJSON для объекта books (2), он будет выглядеть следующим образом:

toJSON in javascript
Run > Reset

JSON.parse

Для декодирования JSON-строки используется другой метод, называемый JSON.parse со следующим синтаксисом:

let value = JSON.parse(str, [reviver]);

JSON довольно сложен: объекты и массивы могут включать другие объекты и массивы. Но обязательно следует формату JSON .

Ниже вы можете найти типичные ошибки в рукописном JSON :

let json = `< welcome: "Welcome", // mistake: property name without quotes "site": 'W3Docs', // mistake: single quotes in value (must be double) 'hasAdmin': true // mistake: single quotes in key (must be double) "update": new Date(2000, 2, 3), // mistake: no "new" is allowed, only bare values "books": [1, 2, 3, 4] // here all fine >`;

Также обратите внимание, что JSON не позволяет комментировать. Если вы добавите комментарий к нему, вы сделаете его недействительным. Существует уникальный формат JSON , который поддерживает ключи без кавычек, комментарии и многое другое.

Резюме

JSON представляет формат данных со стандартом, независимым от библиотек для большинства языков программирования. Он поддерживает массивы, строки, объекты, булевы значения, числа и null .

JavaScript имеет методы JSON.stringify для сериализации в JSON и JSON.parse для чтения из JSON . Если у объекта есть toJSON , вам нужно вызвать его с помощью JSON.stringify. .

Время Викторины: Проверьте Свои Навыки!

отовы проверить свои знания? Погрузитесь в наши интерактивные викторины для более глубокого понимания и веселого способа закрепить знания.

JavaScript – формат JSON и примеры работы с ним

JSON (JavaScript Object Notation) – это текстовый формат представления данных в нотации объекта JavaScript. Предназначен JSON, также как и некоторые другие форматы такие как XML и YAML, для обмена данными.

JavaScript – Что такое JSON

Несмотря на своё название, JSON можно использовать не только в JavaScript, но и в любом другом языке программирования.

JSON по сравнению с другими форматами также обладает достаточно весомым преимуществом. Он в отличие от них является более компактным, а это очень важно при обмене данными в сети Интернет. Кроме этого, JSON более прост в использовании, его намного проще читать и писать.

При веб-разработке JSON очень часто применяется в качестве формата для передачи информации от веб-сервера клиенту (веб-браузеру) при AJAX запросе.

Как выглядит этот процесс? Его можно представить в виде двух шагов. На первом шаге, сервер, по запросу пришедшему ему от клиента, сначала формирует некоторый набор данных в удобном формате, который затем можно было бы очень просто упаковать в строку JSON. Завершается работа на сервере отправкой JSON данных в качестве результата клиенту. На втором шаге, клиент получает в качестве ответа от сервера строку JSON и распаковывает её, т.е. переводит в JavaScript объект. После этого на клиенте выполняются дальнейшие с ними действия, например, выводятся на страницу.

Это один из примеров использования формата JSON. Но его применение не ограничивается только этим сценарием, их очень много и не только в веб.

В JSON, в отличие от XML и YAML, данные организованы также как в объекте JavaScript. Но JSON – это не объект, а строка. При этом не любой объект JavaScript может быть переведён один к одному в JSON. Например, если у объекта есть методы, то они при преобразовании в строку JSON будут проигнорированы и не включены в неё.

Структура формата JSON

Структура строки JSON практически ничем не отличается от записи JavaScript объекта.

Она состоит из набора пар ключ-значения . В этой паре ключ отделяется от значения с помощью знака двоеточия ( : ), а одна пара от другой — с помощью запятой ( , ). При этом ключ в JSON, в отличие от объекта обязательно должен быть заключен в двойные кавычки . Это первое отличие JSON от JavaScript объекта. В объекте ключ (имя свойства) не обязательно следует заключать в двойные кавычки.

JavaScript

// строка JSON var jsonPerson = '{"name":"Иван","age":25}'; // объект JavaScript var person = { name: "Иван", age: 25 };

Чтобы не усложнять доступ к данным, при задании ключам имён лучше придерживаться тех же правил, что и при именовании переменных.

Второе отличие заключается в том, что значение ключа в JSON можно задать только в одном из следующих форматов: string (строкой), number (числом), object (объектом), array (массивом), boolean (логическим значением true или false ) или null (специальным значением JavaScript). Например, значение ключа в JSON не может быть функцией или датой (объектом типа Date ).

JavaScript

// объект JavaScript var person = { name: "Иван", birthDay: new Date(Date.UTC(1985, 03, 05)), getAge: function () { var ageDate = new Date(Date.now() - this.birthDay.getTime()); return Math.abs(ageDate.getUTCFullYear() - 1970); } }; // строка JSON var jsonPerson = '{"name":"Иван","birthDay":"1985-04-05T00:00:00.000Z"}';

Пример JSON строки, состоящей из различных типов данных:

JavaScript

{ "name": "Иван", "age": 37, "mother": { "name": "Ольга", "age": 58 }, "children": [ "Маша", "Игорь", "Таня" ], "married": true, "dog": null }

В ней ключ «name» имеет в качестве значения строку, «age» — число, «mother» — объект, состоящий из «name» и «age», «children» — массив, «married» — логический тип, «dog» — null .

При этом стоит обратить внимание на то, что JSON не допускает использование внутри своей структуры комментариев.

Работа с JSON в JavaScript

Как было уже отмечено выше, JSON – это строка.

JavaScript

// переменная personData, содержит в качестве значения строку в формате JSON var personData = '{"name":"Иван","age":37,"mother":{"name":"Ольга","age":58},"children":["Маша","Игорь","Таня"],"married": true,"dog":null}';

Работа с JSON в JavaScript обычно осуществляется в двух направлениях:

  • перевод строки JSON в объект (данный процесс ещё называют парсингом);
  • конвертирование объекта в строку JSON (другими словами действие обратное парсингу).

Парсинг JSON

Парсинг JSON (перевод строки JSON в объект JavaScript) осуществляется с помощью метода eval или parse .

Пример использования eval для парсинга JSON:

JavaScript

var person = eval('('+personData+')');

Метод eval не рекомендуется использовать так как он не безопасен. Так если кто-то сможет добавить скрипт в строку JSON, то он выполнится.

В JavaScript для парсинга строки в JSON рекомендуется использовать метод JSON.parse . Он такой уязвимости не имеет.

Использование метода JSON.parse :

JavaScript

// переменная person - это объект JavaScript, который получен путём парсинга строки JSON var person = JSON.parse(personData);

Конвертирование объекта JavaScript в строку JSON

Перевод объекта JavaScript в строку JSON осуществляется с помощью метода JSON.stringify . Данный метод осуществляет действие обратное методу JSON.parse .

JavaScript

var personString = JSON.strigify(person);

Преимущества формата JSON

Формат представления данных JSON имеет следующие преимущества:

  • удобные и быстрые в работе методы, предназначенные для конвертации (парсинга) строки JSON в объект JavaScript и обратно;
  • понятная и простая структура данных;
  • очень маленький размер по сравнению с другими форматами данных (например XML). Это связано с тем, что формат JSON содержит минимальное возможное форматирование, т.е. при его написании используется всего несколько специальных знаков. Это очень важное преимущество, т.к. данные представленные в формате JSON будут быстрее загружаться, чем, если бы они были бы представлены в других форматах.

Из-за того что данный формат имеет очень много преимуществ он стал применяться не только в JavaScript, но и во многих других языках, таких как C, Ruby, Perl, Python, PHP и т.д.

Сравнение форматов JSON и XML

Формат JSON имеет следующие преимущества перед форматом XML:

Формат JSON против XML

  1. При передаче некоторых данных размер JSON будет значительно меньше, чем размер XML.
  2. JSON имеет более удобные методы конвертации в структуры данных JavaScript, чем XML.
  3. JSON более просто создавать, чем XML.

Работа с данными JSON после парсинга

Работа с данными JSON после парсинга осуществляется как с объектом JavaScript.

JavaScript

//JSON var personData = '{"name":"Иван","age":37,"mother":{"name":"Ольга","age":58},"children":["Маша","Игорь","Таня"],"married": true,"dog": null}'; //Объект JavaScript person var person = JSON.parse(personData);

Рассмотрим основные моменты:

JavaScript

//получить значения ключа (свойства) name person.name; person["name"]; //получить значения ключа (свойства) name, находящегося в объекте mother person.mother.name; //удалить элемент age delete(person.age) //добавить (или обновить) ключ (свойство) person.eye = "карие"; //при работе с массивами необходимо использовать методы, предназначенные для работы именно с массивами //удалить 1 элементиз массива (метод splice) person.children.splice(1,1) //добавить элемент в массив (метод push) person.children.push("Катя");

Работа с данными JSON после парсинга

Для перебора элементов в объекте можно использовать цикл for..in :

JavaScript

for (key in person) { if (person.hasOwnProperty(key)) { //ключ = key //значение = person[key] console.log("Ключ = " + key); console.log("Значение image" src="https://itchief.ru/assets/images/tickets/2015.12/javascript-for-in-object.png" alt="JavaScript - Перебор элементов в объекте" title="JavaScript - Перебор элементов в объекте"> 

Для перебора элементов массива можно использовать следующий цикл:

JavaScript
for (var i=0; i 
Если статья понравилась, то поделитесь ей в социальных сетях:

Комментарии: 55

kotbasikcom
10.02.2024, 16:06

Здесь фрагмент кода

Здравствуйте. Подскажите, пожалуйста, как можно вывести (показать) все файлы к событию?

Выводятся только по одному файлу к событию.(в консоли результат)

Александр Мальцев
16.02.2024, 08:36

Привет! Так console.log() нужно просто поместить внутрь цикла:

for (let i = 0; i

Учебное пособие по JSON: обучение с помощью простого формата файла ПРИМЕР

JSON — это формат файла, используемый для хранения информации в организованном и легкодоступном виде. Его полная форма — это нотация объектов JavaScript. Он предлагает человеческоеreadable совокупность данных, к которым можно получить логический доступ. Расширение имени файла для написанного программного кода: .json . Типом интернет-носителя для JSON является application/json, а его унифицированный идентификатор типа — public.json.

Зачем использовать JSON?

Вот важные преимущества/плюсы использования JSON:

  • Обеспечить поддержку всех браузеров
  • Легко читать и писать
  • Простой синтаксис
  • Вы можете изначально анализировать в JavaScript, используя функцию eval().
  • Легко создавать и манипулировать
  • Поддерживается всеми основными платформами JavaScript.
  • Поддерживается большинством серверных технологий
  • JSON изначально распознается JavaScript.
  • Он позволяет передавать и сериализовать структурированные данные с помощью сетевого подключения.
  • Вы можете использовать его с современными языками программирования.
  • JSON — это текст, который можно преобразовать в любой объект JavaScript в JSON и отправить этот JSON на сервер.

История JSON

История JSON

Вот важные вехи, формирующие историю JSON:

  • Дуглас Крокфорд определил формат JSON в начале 2000-х годов.
  • Официальный сайт был запущен в 2002 году.
  • В декабре 2005 года Yahoo! начинает предлагать некоторые из своих веб-сервисов в формате JSON.
  • JSON стал международным стандартом ECMA в 2013 году.
  • Самый обновленный стандарт формата JSON был опубликован в 2017 году.

Особенности JSON

Легкий в использовании – JSON API предлагает высокоуровневый фасад, который помогает упростить часто используемые сценарии использования.

Перфоманс – JSON довольно быстр, поскольку потребляет очень мало места в памяти, что особенно подходит для больших графов объектов или систем.

Бесплатный инструмент – Библиотека JSON имеет открытый исходный код и бесплатна для использования.

Не требует создания картографии – API Джексона обеспечивает сопоставление по умолчанию для многих объектов, подлежащих сериализации.

Очистить JSON – Создает чистый и совместимый результат JSON, который легко читается.

Зависимость – Библиотеке JSON не требуется никакая другая библиотека для обработки.

Правила синтаксиса JSON

Правила синтаксиса JSON:

  • Данные должны быть в парах имя/значение.
  • Данные должны быть разделены запятыми
  • Фигурные скобки должны удерживать объекты
  • Квадратный brackets хранить массивы

Типы данных в JSON

Важные типы данных, используемые в JSON:

Тип данных Описание
Номер регистрации Он включает в себя вещественное, целое или плавающее число.
строка Он состоит из любого текста или Unicode. double- в кавычках с обратной косой чертой
Логический Тип данных Boolean представляет значения True или False.
Значение Null Значение Null означает, что связанная переменная не имеет никакого значения.
объект Это коллекция пар ключ-значение, всегда разделенная запятой и заключенная в фигурные скобки. brackets.
массив Это упорядоченная последовательность разделенных значений.

Номер регистрации

  • Число double-точный формат с плавающей запятой, который зависит от метода его реализации.
  • В JSON нельзя использовать шестнадцатеричный и восьмеричный форматы.

Фоллоwing в таблице отображаются типы номеров:

Тип Описание
Целое Цифры 1-9 и 0. Как положительные, так и отрицательные. numbers.
Дробь Дроби типа 3
экспонент Экспонента типа e, e+

var json-object-name =
var obj =

строка

это серия double- символы Юникода в кавычках и экранирование обратной косой черты.

Фоллоwing в таблице показаны различные типы строк:

Тип Описание
* Использовать для double ввод котировок
/ Использование для солидуса
\ Использование для обратного солидуса
B Используйте, чтобы добавить backspace
F Из ленты
N Чтобы создать новую строку
R Использовать для возврата каретки
T Чтобы отобразить горизонтальную вкладку
U Шестнадцатеричные цифры

var json-object-name =
var obj=

Логический

Он хранит только истинные или ложные значения.

var json-object-name = 

var obj =

массив

  • Это упорядоченный набор значений.
  • Вам следует использовать массив, если имена ключей являются последовательными целыми числами.
  • Он должен быть заключен внутри квадрата. brackets которые должны быть разделены ',' (запятой)
[value, . ]

Showing массив, хранящий несколько объектов:

Объект JSON

A Объект JSON — это объект в формате JSON, заключенный в фигурные brackets. Он записывается в виде неупорядоченного набора пар имя-значение, в котором за именем должно следовать «:» (двоеточие), а пары имя/значение необходимо разделять с помощью «,» (запятая). Его можно использовать, когда имена ключей представляют собой произвольные строки.

Пробелы

Вы можете вставлять пробелы между парой токенов.

var a = " Alex"; var b = "Steve";

Пример JSON

В данном примере кода показано, как использовать JSON для хранения информации, связанной с книги по программированию вместе с изданием и именем автора.

Давайте разберемся с форматом JSON на другом примере файла JSON. Здесь JSON определяет имя, фамилию и идентификатор студента.

Применение JSON

Вот некоторые распространенные применения JSON:

  • Помогает вам перенести данные с сервера
  • Образец формата файла JSON помогает передавать и сериализовать все типы структурированных данных.
  • Позволяет выполнитьsyncхронологические вызовы данных без необходимости обновления страницы
  • Помогает передавать данные между сервером и веб-приложениями.
  • Он широко используется для приложений на основе JavaScript, включая расширения браузера и веб-сайты.
  • Вы можете передавать данные между сервером и веб-приложением с помощью JSON.
  • Мы можем использовать JSON с современными языками программирования.
  • Он используется для написания приложений на основе JavaScript, включающих надстройки браузера.
  • Веб-сервисы и Restful API используют формат JSON для получения общедоступных данных.

JSON против XML

Вот основная разница между JSON и XML.

JSON XML
Объект JSON имеет тип XML данные не имеют типа
Типы JSON: строка, число, массив, логическое значение Все данные XML должны быть строковыми
Данные легко доступны в виде объектов JSON. XML-данные должны быть проанализированы.
Файлы JSON более человечны.readable. XML-файлы менее человечны.readable.
JSON поддерживается большинством браузеров. Кросс-браузерный анализ XML может быть сложным
JSON не имеет возможности отображения. XML предоставляет возможность отображать данные, поскольку это язык разметки.
Получить значение легко Получить ценность сложно
Поддерживается многими инструментами Ajax. Не полностью поддерживается набором инструментов Ajax.
Полностью автоматизированный способ десериализации/сериализации JavaScript. Разработчикам приходится писать код JavaScript для сериализации/десериализации из XML.
Встроенная поддержка объекта. Объект должен быть выражен с помощью соглашений – чаще всего не используются атрибуты и элементы.
Пример JSON

Ниже приведен простой пример JSON:

XML-пример
   01 Tom Price  02 Nick Thameson   

Чем не JSON?

  • Пример файла данных JSON не является форматом документа.
  • Это не язык разметки.
  • JSON не предоставляет общий формат сериализации.
  • Это не повторяющиеся или циклические структуры.
  • Это также не невидимая структура.

Недостатки JSON

Вот несколько преимуществ JSON:

  • Нет поддержки пространства имен, следовательно, плохая расширяемость.
  • Ограниченный Инструменты разработки поддержка
  • Нет поддержки формального определения грамматики

Популярные инструменты JSON (дополнения)

Вот важные инструменты JSON:

JSONLint:

JSONLint — это проект с открытым исходным кодом, который используется в качестве средства проверки и преобразования JSON. Это облегченный формат обмена данными. Скопируйте и вставьте, введите или введите URL-адрес в инструменте проверки JSON, чтобы проверить ваш код JSON.

Онлайн-редактор JSON:

JSON Editor Online — полезный веб-инструмент. Он позволяет редактировать, просматривать и форматировать JSON. Он отображает ваши данные рядом в четком, редактируемом виде. программное обеспечение для редактирования кода.

Инструмент минимизации JSON:

Это инструмент, который поможет вам удалить пробелы и создать код JSON, занимающий минимум места.

Конвертер JSON в XML:

Конвертер JSON в XML — это простой и эффективный инструмент, который поможет вам конвертировать код JSON.

Форматер JSON:

Средство форматирования JSON поможет вам решить проблему, отформатировав данные JSON так, чтобы их было легко читать и отлаживать человеку.

Итого

  • Метод JSON используется для хранения информации в организованном и легкодоступном виде.
  • JSON расшифровывается как JavaScript Object Notation.
  • JSON Обеспечивает поддержку всех браузеров на многих языках.
  • Дуглас Крокфорд определил формат JSON в начале 2000-х годов.
  • JSON API предлагает высокоуровневый фасад, который помогает упростить часто используемые сценарии использования.
  • Важными правилами написания системы JSON является то, что данные должны записываться в парах имя/значение.
  • Число, строка, логическое значение, значение NULL, объект и массив — важные типы данных, используемые в JSON.
  • Это поможет вам перенести данные с сервера.
  • Объект JSON имеет тип, тогда как данные XML не имеют типа.
  • JSON не является форматом документа
  • Нет поддержки пространства имен, следовательно, плохая расширяемость.
  • JSONLint — это проект с открытым исходным кодом, который используется в качестве средства проверки и преобразования JSON.
  • Что такое СОА? Сервис-ориентированный ArchiПринципы
  • Учебное пособие по микросервисам: что это такое, Archiтектура и пример
  • 70 лучших вопросов на собеседовании по веб-сервисам (2024 г.)
  • JSON против XML – разница между ними
  • API против веб-сервиса – разница между ними
  • 25 лучших вопросов и ответов на собеседовании по микросервисам (2024 г.)
  • SOA против микросервисов – разница между ними
  • Что такое API? Полная форма, значение, определение, типы и примеры

Как вызвать API в JavaScript – с примерами

Вызов API (интерфейс прикладного программирования) в JavaScript — это фундаментальное действие, которое веб-разработчики должны знать, как выполнять. Он позволяет получать данные из внешних источников и интегрировать их в ваши веб-приложения.

В этом уроке я шаг за шагом покажу вам процесс выполнения вызовов API в JavaScript. К концу этой статьи вы получите четкое представление о том, как взаимодействовать с API в ваших проектах JavaScript.

Что такое API?

Прежде чем мы углубимся в технические детали вызова API в JavaScript, давайте начнем с основ. API, или интерфейс прикладного программирования, похож на мост, который позволяет двум различным программным системам взаимодействовать друг с другом. Он определяет набор правил и протоколов для запроса и обмена данными.

API-интерфейсы можно использовать для получения информации из внешних источников, отправки данных во внешние службы или выполнения различных других действий. Они широко используются в веб-разработке для доступа к данным из различных онлайн-сервисов, таких как платформы социальных сетей, данные о погоде, финансовая информация и многое другое.

Как выбрать API

Первый шаг при вызове API — выбор того, который соответствует вашим потребностям. Доступно бесчисленное множество API, предоставляющих данные по широкому кругу тем.

Некоторые из популярных типов API включают в себя:

  • API-интерфейсы RESTful: они широко используются для простого извлечения данных и манипулирования ими. Они используют стандартные методы HTTP, такие как GET, POST, PUT и DELETE.
  • Сторонние API: Многие онлайн-сервисы предлагают API, которые позволяют вам получать доступ к их данным, например API Twitter для твитов или API Карт Google для данных о местоположении.
  • API-интерфейсы погоды: Если вам нужны данные о погоде, хорошим выбором станут такие API, как OpenWeatherMap или WeatherAPI.
  • Финансовые API: Чтобы получить финансовые данные, например цены на акции, вы можете использовать такие API, как Alpha Vantage или Yahoo Finance.

В этом руководстве мы будем использовать вымышленный RESTful API в качестве примера, чтобы упростить задачу. Вы можете заменить его API по вашему выбору.

Как использовать Fetch API для запросов GET

Для выполнения запросов к API в JavaScript вы можете использовать fetch API, встроенный в современные браузеры. Это API на основе обещаний, который позволяет легко отправлять HTTP-запросы и асинхронно обрабатывать ответы.

Вот как сделать запрос GET, используя fetch :

// Define the API URL const apiUrl = 'https://api.example.com/data'; // Make a GET request fetch(apiUrl) .then(response => < if (!response.ok) < throw new Error('Network response was not ok'); >return response.json(); >) .then(data => < console.log(data); >) .catch(error => < console.error('Error:', error); >);

В приведенном выше коде:

  • Мы определили URL-адрес API, который хотим вызвать.
  • Мы использовали эту fetch функцию для выполнения запроса GET к URL-адресу API. Функция fetch возвращает обещание.
  • Метод .then() обрабатывает асинхронный ответ от сервера.
  • Свойство response.ok проверяется, чтобы убедиться в корректности ответа.
  • Мы анализируем данные JSON, используя response.json() метод.
  • Наконец, мы записываем данные в консоль или обрабатываем любые ошибки, которые могут возникнуть.

Как обрабатывать ответы

Когда вы делаете вызов API, сервер отвечает данными. То, как вы обрабатываете эти данные, зависит от требований вашего приложения. В предыдущем примере мы просто записывали данные в консоль. Однако вы можете обрабатывать данные различными способами, например отображать их на веб-странице или сохранять в базе данных.

Вот модифицированный пример, который отображает данные API в элементе HTML:

const apiUrl = 'https://api.example.com/data'; const outputElement = document.getElementById('output'); fetch(apiUrl) .then(response => < if (!response.ok) < throw new Error('Network response was not ok'); >return response.json(); >) .then(data => < // Display data in an HTML element outputElement.textContent = JSON.stringify(data, null, 2); >) .catch(error => < console.error('Error:', error); >);

В этом примере мы используем outputElement переменную для выбора элемента HTML, в котором мы хотим отобразить данные. Свойство textContent используется для обновления содержимого этого элемента данными JSON.

Обработка ошибок в вызовах API

Обработка ошибок — важная часть выполнения вызовов API в JavaScript. Запросы API могут завершаться неудачей по разным причинам, например из-за проблем с сетью, сервером или неверными URL-адресами.

В наших предыдущих примерах мы использовали fetch обработку ошибок на основе обещаний для перехвата и обработки ошибок.

Помимо блокировки catch , вы также можете проверить код состояния HTTP, используя response.status для определения характера ошибки. Вот как вы можете это сделать:

const apiUrl = 'https://api.example.com/data'; fetch(apiUrl) .then(response => < if (!response.ok) < if (response.status === 404) < throw new Error('Data not found'); >else if (response.status === 500) < throw new Error('Server error'); >else < throw new Error('Network response was not ok'); >> return response.json(); >) .then(data => < outputElement.textContent = JSON.stringify(data, null, 2); >) .catch(error => < console.error('Error:', error); >);

В этом примере мы проверяем определенные коды состояния HTTP (например, 404 и 500) и предоставляем более описательные сообщения об ошибках. Вы можете настроить обработку ошибок в соответствии с потребностями вашего приложения.

Как делать POST-запросы

До сих пор мы сосредоточились на выполнении запросов GET, которые используются для получения данных из API. Но вам также может потребоваться отправить данные в API, что вы можете сделать с помощью запросов POST.

Вот как сделать простой запрос POST, используя fetch :

const apiUrl = 'https://api.example.com/data'; const data = < name: 'John Doe', email: 'johndoe@example.com', >; const requestOptions = < method: 'POST', headers: < 'Content-Type': 'application/json', >, body: JSON.stringify(data), >; fetch(apiUrl, requestOptions) .then(response => < if (!response.ok) < throw new Error('Network response was not ok'); >return response.json(); >) .then(data => < outputElement.textContent = JSON.stringify(data, null, 2); >) .catch(error => < console.error ('Error:', error); >);
  • Мы определили URL-адрес API и данные, которые хотим отправить в виде объекта.
  • Мы создали requestOptions объект, который определяет метод (POST), тип контента (application/json) и данные для отправки в формате JSON.
  • Мы передали requestOptions объект функции fetch .

Остальная часть кода остается такой же, как в наших предыдущих примерах, с обработкой ошибок и обработкой данных.

Как работать с ключами API

Многие API требуют аутентификации с помощью ключей API, чтобы гарантировать, что только авторизованные пользователи смогут получить доступ к своим данным. При работе с API, для которых требуются ключи API, вам необходимо включать ключ в свои запросы.

Вот пример того, как включить ключ API в запрос:

const apiKey = 'your_api_key_here'; const apiUrl = 'https://api.example.com/data'; const requestOptions = < method: 'GET', headers: < 'Authorization': `Bearer $`, >, >; fetch(apiUrl, requestOptions) .then(response => < if !response.ok) < throw new Error('Network response was not ok'); >return response.json(); >) .then(data => < outputElement.textContent = JSON.stringify(data, null, 2); >) .catch(error => < console.error('Error:', error); >);

В этом примере мы определяем переменную apiKey и включаем ее в headers объект requestOptions с префиксом «Bearer». Обязательно замените 'your_api_key_here' действительным ключом API.

Асинхронный JavaScript

Вызовы API обычно асинхронны, что означает, что они не блокируют выполнение вашего кода во время ожидания ответа. Это важно, поскольку позволяет вашему веб-приложению оставаться отзывчивым даже при работе с потенциально медленными сетевыми запросами.

Для обработки асинхронных операций мы используем промисы и .then() метод, указывающий, что должно произойти после завершения операции. Это позволяет основному потоку вашего приложения JavaScript продолжать выполнение других задач, ожидая ответа API.

Вот краткий обзор того, как работает асинхронный JavaScript:

Когда вы вызываете fetch , он инициирует асинхронную операцию и немедленно возвращает промис.

Вы используете этот .then() метод для присоединения функций, которые должны выполняться, когда промис выполняется успешно (с ответом) или не удается (с ошибкой).

Любой код за пределами .then() блоков может продолжать работать, пока выполняется вызов API.

Такое асинхронное поведение помогает гарантировать, что ваше приложение будет отвечать на запросы и не зависнет в ожидании данных.

Реальные примеры вызовов API

Теперь, когда мы рассмотрели основы выполнения вызовов API в JavaScript, давайте рассмотрим пару реальных примеров, чтобы увидеть, как эти знания можно применить на практике.

Пример 1: Получение данных о погоде

В этом примере мы будем использовать API OpenWeatherMap для получения данных о погоде для определенного местоположения. Вы можете подписаться на бесплатный ключ API на их веб-сайте.

Вот как вы можете сделать запрос GET для получения данных о погоде и отображения их на веб-странице:

const apiKey = 'your_openweathermap_api_key'; const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=London&appid=$`; const outputElement = document.getElementById('weather-output'); fetch(apiUrl) .then(response => < if (!response.ok) < throw new Error('Network response was not ok'); >return response.json(); >) .then(data => < const temperature = data.main.temp; const description = data.weather[0].description; const location = data.name; outputElement.innerHTML = `

Temperature in $: $°C

Weather: $ `; >) .catch(error => < console.error('Error:', error); >);

В этом примере мы делаем запрос GET к API OpenWeatherMap, передаем ключ API в качестве параметра в URL-адресе и отображаем описание температуры и погоды на веб-странице.

Пример 2. Отправка формы на сервер

Предположим, на вашем веб-сайте есть простая контактная форма, и вы хотите отправить данные формы на сервер для обработки. Вот как вы можете сделать запрос POST для отправки данных формы на сервер:

 
const apiUrl = 'https://api.example.com/submit'; const contactForm = document.getElementById('contact-form'); const responseMessage = document.getElementById('response-message'); contactForm.addEventListener('submit', function (event) < event.preventDefault(); const formData = new FormData(contactForm); const requestOptions = < method: 'POST', body: formData, >; fetch(apiUrl, requestOptions) .then(response => < if (!response.ok) < throw new Error('Network response was not ok'); >return response.text(); >) .then(data => < responseMessage.textContent = data; >) .catch(error => < console.error('Error:', error); >); >);

В этом примере мы прослушиваем событие отправки формы, предотвращаем отправку формы по умолчанию и используем его FormData для сериализации данных формы. Затем мы делаем POST-запрос к серверу, отправляем данные формы и отображаем ответ сервера.

Заключение

Вызов API в JavaScript — ценный навык для веб-разработчиков, позволяющий получить доступ к огромному количеству данных и сервисов для улучшения ваших веб-приложений.

В этом подробном руководстве мы рассмотрели основные концепции и методы, включая выполнение запросов GET и POST, обработку ответов и ошибок, а также работу с ключами API. Вы также увидели два практических примера, демонстрирующих, как получить данные о погоде и отправить данные формы на сервер.

Продолжая работать с API в своих проектах, вы столкнетесь с различными API с их уникальными требованиями и документацией. Помните, что API могут иметь ограничения по скорости, политике использования и ограничениям, поэтому всегда просматривайте документацию API, чтобы убедиться, что вы используете его правильно и ответственно.

Благодаря знаниям, полученным из этого руководства, вы будете хорошо подготовлены к взаимодействию с API-интерфейсами в ваших приложениях JavaScript, что позволит вам создавать динамичные и насыщенные данными веб-интерфейсы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *