Автор оригинала: Kris Koishigawa.
JSON или JavaScript Object Outonation, это все вокруг нас. Если вы когда-либо использовали веб-приложение, есть очень хороший шанс, что он использовал JSON для структуры, хранения и передачи данных между его серверами и вашим устройством.
В этой статье мы кратко рассмотрим различия между JSON и JavaScript, затем перепрыгивайте на разные способы разбора JSON с JavaScript в браузере и в проектах Node.js.
Различия между JSON и JavaScript
Пока JSON выглядит как обычный JavaScript, лучше подумать json как формат данных, аналогично текстовому файлу. Просто так бывает, что JSON вдохновлен синтаксисом JavaScript, поэтому они выглядят так похожеят.
Давайте посмотрим на объекты JSON и массивы JSON и сравните их с помощью своих коллег JavaScript.
JSON Objects VS JavaScript объектные литералы
Во-первых, вот объект JSON:
{
"name": "Jane Doe",
"favorite-game": "Stardew Valley",
"subscriber": false
}
Основное различие между объектом JSON и регулярным объектом JavaScript – также называемым литералом объекта – сводится к кавычкам. Все значения клавиш и типов строки в объекте JSON должны быть завернуты в двойные кавычки ( » ).
Литералы объекта JavaScript немного более гибки. С объективными литералами вам не нужно обернуть ключи и строки в двойных кавычках. Вместо этого вы можете использовать отдельные кавычки ( ' ) или не использовать какой-либо тип кавычки для ключей.
Вот что вышеупомянутый код может выглядеть как буквальный объект JavaScript:
const profile = {
name: 'Jane Doe',
'favorite-game': 'Stardew Valley',
subscriber: false
}
Обратите внимание, что ключ «Любимая игра» обернут в одиночные цитаты. С объективными литералами вам нужно обернуть ключи, где слова разделены тиреми ( - ) в цитатах.
Если вы хотите избежать кавычек, вы можете переписать ключ, чтобы использовать корпус верблюда ( VeriveGame ) или отделите слова с подчеркиванием ( formit_game ).
Массивы JSON VS JavaScript
Массивы JSON работают почти так же, как массивы в JavaScript, и могут содержать строки, логические, цифры и другие объекты JSON. Например:
[
{
"name": "Jane Doe",
"favorite-game": "Stardew Valley",
"subscriber": false
},
{
"name": "John Doe",
"favorite-game": "Dragon Quest XI",
"subscriber": true
}
]
Вот что это может выглядеть в простом JavaScript:
const profiles = [
{
name: 'Jane Doe',
'favorite-game': 'Stardew Valley',
subscriber: false
},
{
name: 'John Doe',
'favorite-game': 'Dragon Quest XI',
subscriber: true
}
];
Json как строка
Вам может быть интересно, если есть объекты и массивы JSON, не могли бы вы использовать его в своей программе, как обычный объект JavaScript Literal или Array?
Причина, по которой вы не можете сделать это, это то, что Джосон действительно просто строка.
Например, когда вы пишете JSON в отдельном файле, как с Jane-Profile.json или Профили.json Выше этот файл фактически содержит текст в виде объекта JSON или массива, который будет выглядеть как JavaScript.
И если вы сделаете запрос на API, это вернет что-то вроде этого:
{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}Как и с текстовыми файлами, если вы хотите использовать JSON в своем проекте, вам нужно будет разобрать или изменить его во что-то, что ваш язык программирования может понять. Например, разбор объекта JSON в Python создаст словарь.
С этим пониманием давайте посмотрим на разные способы разбора JSON в JavaScript.
Как разборнуть JSON в браузере
Если вы работаете с JSON в браузере, вы, вероятно, получаете или отправляете данные через API.
Давайте посмотрим на пару примеров.
Как разобрать JSON с Fetch
Самый простой способ получить данные из API с извлекать , который включает в себя .json () Метод разрыва ответов JSON на использоваемый объект JavaScript буквальный или массив автоматически.
Вот какой-то код, который использует извлекать сделать Получить Запрос на шутку для разработчиков с бесплатного Чак Норрис шутит API :
fetch('https://api.chucknorris.io/jokes/random?category=dev')
.then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
.then(data => console.log(data));
Если вы запустите этот код в браузере, вы увидите что-то вроде этого, войдены в консоль:
{
"categories": ["dev"],
"created_at": "2020-01-05 13:42:19.324003",
"icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
"id": "elgv2wkvt8ioag6xywykbq",
"updated_at": "2020-01-05 13:42:19.324003",
"url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
"value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}
Хотя это выглядит как объект JSON, это действительно буквальный объект JavaScript, и вы можете свободно использовать его в вашей программе.
Как json json с json.stringify ()
Но что, если вы хотите отправить данные на API?
Например, скажем, вы хотели бы отправить шутку Чака Норриса к API The Chuck Norris Jokes API, чтобы другие люди могли прочитать его позже.
Во-первых, вы пишете свою шутку как объектный объект JS:
const newJoke = {
categories: ['dev'],
value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};
Затем, поскольку вы отправляете данные на API, вам нужно будет повернуть NewJoke объект буквальный в строку JSON.
К счастью, JavaScript включает в себя очень полезный метод, чтобы сделать только это – Json.stringify () :
const newJoke = {
categories: ['dev'],
value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};
console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}
console.log(typeof JSON.stringify(newJoke)); // string
Хотя мы преобразуем объект литерала в строку JSON в этом примере, Json.stringify () Также работает с массивами.
Наконец, вам просто нужно будет отправить свою JSON Stringed Shaint к API с Пост запрос.
Обратите внимание, что API Chuck Norris Jokes на самом деле не имеет этой функции. Но если это сделало, вот что может выглядеть код:
const newJoke = {
categories: ['dev'],
value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};
fetch('https://api.chucknorris.io/jokes/submit', { // fake API endpoint
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(newJoke), // turn the JS object literal into a JSON string
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => {
console.error(err);
});И так же, как вы проанализировали входящие JSON с извлекать и использовал Json.stringify () Чтобы преобразовать объект JS буквальный в строку JSON.
Как работать с локальными файлами JSON в браузере
К сожалению, это невозможно (или целесообразно) загрузить локальный файл JSON в браузере.
извлекать бросит ошибку, если вы попытаетесь загрузить локальный файл. Например, скажем, у вас есть файл JSON с некоторыми шутками:
[
{
"categories": ["dev"],
"created_at": "2020-01-05 13:42:19.324003",
"icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
"id": "elgv2wkvt8ioag6xywykbq",
"updated_at": "2020-01-05 13:42:19.324003",
"url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
"value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
},
{
"categories": ["dev"],
"created_at": "2020-01-05 13:42:19.324003",
"icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
"id": "ae-78cogr-cb6x9hluwqtw",
"updated_at": "2020-01-05 13:42:19.324003",
"url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
"value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
}
]
И вы хотите разобрать его и создать список шуток на простой HTML-странице.
Если вы создаете страницу с следующим и откройте его в браузере:
Fetch Local JSON
Вы увидите это в консоли:
Fetch API cannot load file:///jokes.json. URL scheme "file" is not supported
По умолчанию браузеры не позволяют доступу к локальным файлам по соображениям безопасности. Это хорошая вещь, и вы не должны пытаться работать вокруг этого поведения.
Вместо этого лучшее, что нужно сделать, это преобразовать местный файл JSON в JavaScript. К счастью, это довольно легко, так как JSON Syntax настолько похож на JavaScript.
Все, что вам нужно сделать, это создать новый файл и объявить свой JSON в качестве переменной:
const jokes = [
{
"categories": ["dev"],
"created_at": "2020-01-05 13:42:19.324003",
"icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
"id": "elgv2wkvt8ioag6xywykbq",
"updated_at": "2020-01-05 13:42:19.324003",
"url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
"value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
},
{
"categories": ["dev"],
"created_at": "2020-01-05 13:42:19.324003",
"icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
"id": "ae-78cogr-cb6x9hluwqtw",
"updated_at": "2020-01-05 13:42:19.324003",
"url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
"value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
}
]
И добавьте его на свою страницу как отдельный скрипт:
Fetch Local JSON
Вы сможете использовать шутки Массив свободно в вашем коде.
Вы также можете использовать JavaScript модули сделать то же самое, но это немного за пределами объема этой статьи.
Но что, если вы хотите работать с локальными файлами JSON и установлены Node.js? Давайте посмотрим, как это сделать сейчас.
Как разборнуть JSON в Node.js
Node.js – это время выполнения JavaScript, которое позволяет вам запустить JavaScript за пределами браузера. Вы можете прочитать все о Node.js здесь.
Используете ли вы Node.js, чтобы запустить код локально на вашем компьютере, или запустить целые веб-приложения на сервере, приятно знать, как работать с JSON.
Для следующих примеров мы будем использовать то же самое jokes.json файл:
[
{
"categories": ["dev"],
"created_at": "2020-01-05 13:42:19.324003",
"icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
"id": "elgv2wkvt8ioag6xywykbq",
"updated_at": "2020-01-05 13:42:19.324003",
"url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
"value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
},
{
"categories": ["dev"],
"created_at": "2020-01-05 13:42:19.324003",
"icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
"id": "ae-78cogr-cb6x9hluwqtw",
"updated_at": "2020-01-05 13:42:19.324003",
"url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
"value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
}
]
Как разбирать файл json с требуемым ()
Давайте начнем с самых простых методов.
Если у вас есть местный файл JSON, все, что вам нужно сделать, это использовать требовать () загрузить его как любой другой модуль Node.js:
const jokes = require('./jokes.json');
Файл JSON будет автоматически проанализировать для вас, и вы можете начать использовать его в вашем проекте:
const jokes = require('./jokes.json');
console.log(jokes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
Обратите внимание, что это синхронно, означает, что ваша программа остановится до тех пор, пока она не разоблачала весь файл перед продолжением. Действительно большие файлы JSON могут привести к замедлению вашей программы, поэтому просто будьте осторожны с этим.
Кроме того, потому что анализ JSON Этот способ загружает всю вещь в память, лучше использовать этот метод для статических файлов JSON. Если файл JSON меняется во время работы вашей программы, у вас не будет доступа к этим изменениям, пока не перезапустите программу и аналогируйте обновленного файла JSON.
Как разбирать файл json с fs.readfilesync () и json.parse ()
Это более традиционный путь (из-за отсутствия лучшего срока) для разбора файлов JSON в проектах Node.js – прочитайте файл с помощью ФС (Файловая система) Модуль, затем разбирается с Json.parse () Отказ
Давайте посмотрим, как это сделать с fs.readfilesync () метод. Сначала добавьте ФС Модуль к вашему проекту:
const fs = require('fs');
Затем создайте новую переменную для хранения вывода jokes.json файл и установить его равным fs.readfilesync () :
const fs = require('fs');
const jokesFile = fs.readFileSync();
fs.readfilesync () берет пару аргументов. Первый – путь к файлу, которое вы хотите прочитать:
const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json');
Но если вы регистрируете jokesfile К консоли сейчас вы увидите что-то вроде этого:
Это просто означает, что ФС Модуль читает файл, но он не знает кодировку или формат файла в. ФС Может использоваться для загрузки в значительной степени любого файла, а не только те текстовые, такие как JSON, поэтому нам нужно сказать, как кодируется файл.
Для текстовых файлов кодировка обычно UTF8 :
const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json', 'utf8');
Теперь, если вы регистрируете jokesfile В консоль вы увидите содержимое файла.
Но пока мы просто читаем файл, и это все еще строка. Нам нужно будет использовать другой метод для анализа jokesfile в удобный объект или массив JavaScript.
Для этого мы будем использовать Json.parse () :
const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json', 'utf8');
const jokes = JSON.parse(jokesFile);
console.log(jokes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
Как указано имя, Json.parse () Занимает json string и анализирует его в объекте JavaScript или массив.
Как с требуется Способ выше, fs.readfilesync () Это синхронный метод, то есть это может привести к тому, что ваша программа замедляется, если она читает большой файл, JSON или иначе.
Кроме того, он только читает файл один раз и загружает его в память. Если файл меняется, вам нужно снова прочитать файл в какой-то момент. Чтобы облегчить вещи, вы можете создать простую функцию для чтения файлов.
Вот что это может выглядеть:
const fs = require('fs');
const readFile = path => fs.readFileSync(path, 'utf8');
const jokesFile1 = readFile('./jokes.json');
const jokes1 = JSON.parse(jokesFile1);
console.log(jokes1[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
// the jokes.json file changes at some point
const jokesFile2 = readFile('./jokes.json');
const jokes2 = JSON.parse(jokesFile2);
console.log(jokes2[0].value); // "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."Как разобрать JSON с Fs.ReadFile () и json.parse ()
Fs.readfile () Метод очень похож на fs.readfilesync () , за исключением того, что он работает асинхронно. Это отлично, если у вас есть большой файл для чтения, и вы не хотите, чтобы он удерживал остальную часть вашего кода.
Вот основной пример:
const fs = require('fs');
fs.readFile('./jokes.json', 'utf8');Пока что это похоже на то, что мы сделали с fs.readfilesync () , за исключением того, что мы не назначаем его переменной, как jokesfile Отказ Потому что это асинхронный, любой код после Fs.readfile () Он будет работать до того, как он закончил чтение файла.
Вместо этого мы будем использовать функцию обратного вызова и анализировать JSON внутри него:
const fs = require('fs');
fs.readFile('./jokes.json', 'utf8', (err, data) => {
if (err) console.error(err);
const jokes = JSON.parse(data);
console.log(jokes[0].value);
});
console.log("This will run first!");Который печатает следующее к консоли:
This will run first Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris.
Как с fs.readfilesync () , Fs.readfile () Загружает файл в память, то есть необходимо снова прочитать файл, если он меняется.
Также, хотя Fs.readfile () Асинхронный, в конечном итоге все загружает весь файл, который он читает в память. Если у вас есть массивный файл, может быть лучше посмотреть Node.js Streams вместо.
Как json json с json.stringify () в node.js
Наконец, если вы разбираетесь на JSON с Node.js, есть хороший шанс, что вам нужно будет вернуть JSON в какой-то момент, возможно, как ответ API.
К счастью, это работает так же, как в браузере – просто используйте Json.stringify () Для преобразования литералов объекта JavaScript или массивы в строку JSON:
const newJoke = {
categories: ['dev'],
value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};
console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}
Вот и все! Мы охватываем только все, что вам нужно знать о работе с JSON в браузере и в проектах Node.js.
Теперь выйдите туда и разбирайте или строгайте JSON к контенту вашего сердца.
Я что-то пропустил? Как вы разбираете JSON в своих проектах? Дайте мне знать на Twitter Отказ