Работа с JSON
Обозначение объектов JavaScript (JSON — JavaScript Object Notation) — стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера клиенту,таким образом чтобы это могло отображаться на веб-странице или наоборот). Вы будете сталкиваться с этим довольно часто, поэтому в этой статье мы даём вам все, что вам нужно для работы с JSON используя JavaScript, включая парсинг JSON, чтобы вы могли получить доступ к данным внутри него при создании JSON.
| Необходимые знания: | Базовая компьютерная грамотность, базовые знания HTML и CSS, знакомство с основами JavaScript (см. First steps и Building blocks) и основами OOJS (see Introduction to objects (en-US) ). |
|---|---|
| Цель: | Понять, как работать с данными, хранящимися в JSON, и создавать свои собственные объекты JSON. |
Нет, действительно, что такое JSON?
JSON — текстовый формат данных, следующий за синтаксисом объекта JavaScript, который был популяризирован Дугласом Крокфордом. Несмотря на то, что он очень похож на буквенный синтаксис объекта JavaScript, его можно использовать независимо от JavaScript, и многие среды программирования имеют возможность читать (анализировать) и генерировать JSON.
JSON существует как строка,что необходимо при передаче данных по сети. Он должен быть преобразован в собственный объект JavaScript, если вы хотите получить доступ к данным. Это не большая проблема. JavaScript предоставляет глобальный объект JSON, который имеет методы для преобразования между ними.
Примечание: Преобразование строки в родной объект называется десериализацией (преобразование из последовательной формы в параллельную*)*, в то время как преобразовании родного объекта в строку, таким образом ,чтобы он мог быть передан через сеть, называется сериализацией(преобразование в последовательную форму).
Объект JSON может быть сохранён в собственном файле, который в основном представляет собой текстовый файл с расширением .json и MIME type application/json .
Структура JSON
Как описано выше, JSON представляет собой строку, формат которой очень похож на буквенный формат объекта JavaScript. Вы можете включать одни и те же базовые типы данных внутри JSON, так же как и в стандартном объекте JavaScript — строки, числа, массивы, булевы и другие объектные литералы. Это позволяет построить иерархию данных, к примеру, так:
Если бы мы загрузили этот объект в программу JavaScript, создали переменную с названием superHeroes , мы могли бы затем получить доступ к данным внутри неё, используя те же самые точечную и скобочную нотации, которые мы рассмотрели в статье JavaScript object basics. Например:
Чтобы получить доступ к последующим данным по иерархии, вам просто нужно объединить требуемые имена свойств и индексы массивов. Например, чтобы получить доступ к третьей сверхспособности второго героя, указанного в списке участников, вы должны сделать следующее:
- Сначала у нас есть имя переменной — superHeroes .
- Внутри мы хотим получить доступ к свойству members , поэтому мы используем [‘members’] .
- members содержат массив, заполненный объектами. Мы хотим получить доступ ко второму объекту внутри массива, поэтому мы используем [1] .
- Внутри этого объекта мы хотим получить доступ к свойству powers , поэтому мы используем [‘powers’] .
- Внутри свойства powers находится массив, содержащий сверхспособности выбранного героя. Нам нужен третий, поэтому мы используем [2] .
Примечание: . Мы сделали JSON, видимый выше, доступным внутри переменной в нашем примере JSONTest.html (см. исходный код). Попробуйте загрузить это, а затем получить доступ к данным внутри переменной через консоль JavaScript вашего браузера.
Массивы как JSON
Выше мы упоминали ,что JSON текст выглядит практически так же как и JavaScript объект,и это почти правильно.Причина,по которой мы говорим почти правильно заключается в том ,что массив также валиден JSON например:
Вышесказанное вполне справедливо для JSON. Вам просто нужно получить доступ к элементам массива (в его анализируемой версии), начиная с индекса массива, например [0][«powers»][0] .
Другие примечания
- JSON — это чисто формат данных — он содержит только свойства, без методов.
- JSON требует двойных кавычек, которые будут использоваться вокруг строк и имён свойств. Одиночные кавычки недействительны.
- Даже одна неуместная запятая или двоеточие могут привести к сбою JSON-файла и не работать. Вы должны быть осторожны, чтобы проверить любые данные, которые вы пытаетесь использовать (хотя сгенерированный компьютером JSON с меньшей вероятностью включает ошибки, если программа генератора работает правильно). Вы можете проверить JSON с помощью приложения вроде JSONLint.
- JSON может принимать форму любого типа данных, допустимого для включения в JSON, а не только массивов или объектов. Так, например, одна строка или номер будут действительным объектом JSON.
- В отличие от кода JavaScript, в котором свойства объекта могут не заключаться в двойные кавычки, в JSON в качестве свойств могут использоваться только строки заключённые в двойные кавычки.
Активное обучение: Работа с примером JSON
Итак, давайте рассмотрим пример, чтобы показать то, как мы можем использовать некоторые данные JSON на веб-сайте.
Начало работы
Для начала создайте локальные копии наших файлов heroes.html и style.css. Последний содержит простой CSS для стилизации нашей страницы, в то время как первый содержит очень простой HTML-код сущности:
Плюс <script> , чтобы содержать код JavaScript, который мы будем писать в этом упражнении. На данный момент он содержит только две строки, которые захватывают ссылки на элементы <header> и <section> и сохраняют их в переменных:
Мы собираемся загрузить его на нашу страницу и использовать некоторые изящные манипуляции DOM, чтобы отобразить их, например:
Получение JSON
Чтобы получить JSON, мы будем использовать API, называемый XMLHttpRequest (часто называемый XHR). Это очень полезный объект JavaScript, который позволяет нам делать сетевые запросы для извлечения ресурсов с сервера через JavaScript (например, изображения, текст, JSON, даже фрагменты HTML), что означает, что мы можем обновлять небольшие разделы контента без необходимости перезагрузки всей страницы. Это привело к более отзывчивым веб-страницам и звучит захватывающе, но, к сожалению, выходит за рамки этой статьи, чтобы изучить это гораздо более подробно.
-
Начнём с того, что мы собираемся сохранить URL-адрес JSON, который мы хотим получить в переменной. Добавьте нижеследующий код JavaScript:
- Метод HTTP, который следует использовать при выполнении сетевого запроса. В этом случае GET самый подходящий, так как мы просто извлекаем некоторые простые данные.
- URL-адрес для запроса — это URL-адрес файла JSON, который мы сохранили ранее.
Здесь мы сохраняем ответ на наш запрос (доступный в свойстве response ) в переменной superHeroes ; эта переменная теперь будет содержать объект JavaScript, основанный на JSON! Затем мы передаём этот объект двум вызовам функций — первый из них заполнит <header> правильными данными, а второй создаст информационную карту для каждого героя в команде и вставляет её в <section> .
Мы свернули код в обработчик событий, который запускается, когда событие загрузки запускается в объекте запроса (см. onload ) — это связано с тем, что событие загрузки запускается, когда ответ успешно возвращается; поступая таким образом,это гарантия того, что request.response определённо будет доступен, когда мы начнём работу с ним.
Теперь мы извлекли данные JSON и превратили его в объект JavaScript, давайте воспользуемся им, написав две функции, на которые мы ссылались выше. Прежде всего, добавьте следующее определение функции ниже предыдущего кода:
Мы назвали параметр jsonObj , чтобы напомнить себе, что этот объект JavaScript возник из JSON. Здесь мы сначала создаём элемент <h1> (en-US) с createElement() , устанавливаем его textContent равным свойству squadName объекта, а затем добавляем его в заголовок с помощью appendChild() . Затем мы выполняем очень похожую операцию с абзацем: создаём его, устанавливаем его текстовое содержимое и добавляем его в заголовок. Единственное различие заключается в том, что его текст задан, как конкатенированная строка, содержащая как homeTown , так и formed свойства объекта.
Создание информационных карт героя
Затем добавьте следующую функцию внизу кода, которая создаёт и отображает карты супергероев:
Для начала сохраним свойство members объекта JavaScript в новой переменной. Этот массив содержит несколько объектов, которые содержат информацию для каждого героя.
Затем мы используем for loop для циклического прохождения каждого объекта в массиве. Для каждого из них мы:
- Создаём несколько новых элементов: <article> , <h2> , три <p> и <ul> .
- Устанавливаем <h2> , чтобы содержать name текущего героя.
- Заполняем три абзаца своей secretIdentity , age и строкой, в которой говорится: «Суперспособности:», чтобы ввести информацию в список.
- Сохраняем свойство powers в другой новой переменной под названием superPowers — где содержится массив, в котором перечислены сверхспособности текущего героя.
- Используем другой цикл for , чтобы прокрутить сверхспособности текущего героя , для каждого из них мы создаём элемент <li> , помещаем в него сверхспособности, а затем помещаем listItem внутри элемента <ul> ( myList ) с помощью appendChild() .
- Последнее, что мы делаем, это добавляем <h2> , <p> и <ul> внутри <article> ( myArticle ), а затем добавляем <article> в <section> . Важное значение имеет порядок, в котором добавляются элементы, так как это порядок, который они будут отображать внутри HTML.
Примечание: . Если вам не удаётся заставить этот пример работать, попробуйте обратиться к нашему исходному коду heroes-finished.html (см. также он работает в режиме live).
Примечание: . Если у вас возникли проблемы после нотации точек / скобок, которые мы используем для доступа к объекту JavaScript, в этом поможет открытие файла superheroes.json на другой вкладке или в текстовом редакторе ,и обращаться к нему каждый раз, когда вам нужен JavaScript. Вы также можете обратиться к нашей статье JavaScript objectbasics чтобы получить дополнительную информацию о нотации точек и скобок.
Преобразование между объектами и текстом
Вышеприведённый пример был прост с точки зрения доступа к объекту JavaScript, потому что мы задали XHR-запрос для прямого преобразования ответа JSON в объект JavaScript, используя:
Но иногда нам не так везёт — иногда мы получаем сырую строку JSON и нам нужно преобразовать её в объект самостоятельно. И когда мы хотим отправить объект JavaScript по сети, нам нужно преобразовать его в JSON (строку) перед отправкой. К счастью, эти две проблемы настолько распространены в веб-разработке, что встроенный объект JSON доступен в браузерах, которые содержат следующие два метода:
-
: принимает строку JSON в качестве параметра и возвращает соответствующий объект JavaScript. : принимает объект, как параметр и возвращает эквивалентную строковую JSON строку.
Вы можете увидеть первый метод в действии в нашем примере heroes-finished-json-parse.html (см. исходный код) — это то же самое, что и в примере, который мы создали ранее, за исключением того, что мы установили XHR для возврата сырого JSON текста, затем используется parse() , чтобы преобразовать его в фактический объект JavaScript. Ключевой фрагмент кода находится здесь:
Как вы могли догадаться, stringify() работает обратным образом. Попробуйте ввести следующие строки в консоль JavaScript браузера один за другим, чтобы увидеть его в действии:
Здесь мы создаём объект JavaScript, затем проверяем, что он содержит, а затем преобразуем его в строку JSON, используя stringify() , сохраняя возвращаемое значение в новой переменной, а затем снова проверяем его.
Резюме
В этой статье мы предоставили вам простое руководство по использованию JSON в ваших программах, в том числе о том, как создавать и анализировать JSON, и как получить доступ к данным, заблокированным внутри него. В следующей статье мы рассмотрим объектно-ориентированный JavaScript.
Формат JSON, метод toJSON
Допустим, у нас есть сложный объект, и мы хотели бы преобразовать его в строку, чтобы отправить по сети или просто вывести для логирования.
Естественно, такая строка должна включать в себя все важные свойства.
Мы могли бы реализовать преобразование следующим образом:
…Но в процессе разработки добавляются новые свойства, старые свойства переименовываются и удаляются. Обновление такого toString каждый раз может стать проблемой. Мы могли бы попытаться перебрать свойства в нём, но что, если объект сложный, и в его свойствах имеются вложенные объекты? Мы должны были бы осуществить их преобразование тоже.
К счастью, нет необходимости писать код для обработки всего этого. У задачи есть простое решение.
JSON.stringify
JSON (JavaScript Object Notation) – это общий формат для представления значений и объектов. Его описание задокументировано в стандарте RFC 4627. Первоначально он был создан для JavaScript, но многие другие языки также имеют библиотеки, которые могут работать с ним. Таким образом, JSON легко использовать для обмена данными, когда клиент использует JavaScript, а сервер написан на Ruby/PHP/Java или любом другом языке.
JavaScript предоставляет методы:
- JSON.stringify для преобразования объектов в JSON.
- JSON.parse для преобразования JSON обратно в объект.
Например, здесь мы преобразуем через JSON.stringify данные студента:
Метод JSON.stringify(student) берёт объект и преобразует его в строку.
Полученная строка json называется JSON-форматированным или сериализованным объектом. Мы можем отправить его по сети или поместить в обычное хранилище данных.
Обратите внимание, что объект в формате JSON имеет несколько важных отличий от объектного литерала:
- Строки используют двойные кавычки. Никаких одинарных кавычек или обратных кавычек в JSON. Так ‘John’ становится "John" .
- Имена свойств объекта также заключаются в двойные кавычки. Это обязательно. Так age:30 становится "age":30 .
JSON.stringify может быть применён и к примитивам.
JSON поддерживает следующие типы данных:
- Объекты
- Массивы [ . ]
- Примитивы:
- строки,
- числа,
- логические значения true/false ,
- null .
JSON является независимой от языка спецификацией для данных, поэтому JSON.stringify пропускает некоторые специфические свойства объектов JavaScript.
- Свойства-функции (методы).
- Символьные ключи и значения.
- Свойства, содержащие undefined .
Обычно это нормально. Если это не то, чего мы хотим, то скоро мы увидим, как можно настроить этот процесс.
Самое замечательное, что вложенные объекты поддерживаются и конвертируются автоматически.
Важное ограничение: не должно быть циклических ссылок.
Здесь преобразование завершается неудачно из-за циклической ссылки: room.occupiedBy ссылается на meetup , и meetup.place ссылается на room :
Исключаем и преобразуем: replacer
Полный синтаксис JSON.stringify :
В большинстве случаев JSON.stringify используется только с первым аргументом. Но если нам нужно настроить процесс замены, например, отфильтровать циклические ссылки, то можно использовать второй аргумент JSON.stringify .
Если мы передадим ему массив свойств, будут закодированы только эти свойства.
Здесь мы, наверное, слишком строги. Список свойств применяется ко всей структуре объекта. Так что внутри participants – пустые объекты, потому что name нет в списке.
Давайте включим в список все свойства, кроме room.occupiedBy , из-за которого появляется цикличная ссылка:
Теперь всё, кроме occupiedBy , сериализовано. Но список свойств довольно длинный.
К счастью, в качестве replacer мы можем использовать функцию, а не массив.
Функция будет вызываться для каждой пары (key, value) , и она должна возвращать заменённое значение, которое будет использоваться вместо исходного. Или undefined , чтобы пропустить значение.
В нашем случае мы можем вернуть value «как есть» для всего, кроме occupiedBy . Чтобы игнорировать occupiedBy , код ниже возвращает undefined :
Обратите внимание, что функция replacer получает каждую пару ключ/значение, включая вложенные объекты и элементы массива. И она применяется рекурсивно. Значение this внутри replacer – это объект, который содержит текущее свойство.
Первый вызов – особенный. Ему передаётся специальный «объект-обёртка»: <"": meetup>. Другими словами, первая (key, value) пара имеет пустой ключ, а значением является целевой объект в общем. Вот почему первая строка из примера выше будет ":[object Object]" .
Идея состоит в том, чтобы дать как можно больше возможностей replacer – у него есть возможность проанализировать и заменить/пропустить даже весь объект целиком, если это необходимо.
Форматирование: space
Третий аргумент в JSON.stringify(value, replacer, space) – это количество пробелов, используемых для удобного форматирования.
Ранее все JSON-форматированные объекты не имели отступов и лишних пробелов. Это нормально, если мы хотим отправить объект по сети. Аргумент space используется исключительно для вывода в удобочитаемом виде.
Ниже space = 2 указывает JavaScript отображать вложенные объекты в несколько строк с отступом в 2 пробела внутри объекта:
Третьим аргументом также может быть строка. В этом случае строка будет использоваться для отступа вместо ряда пробелов.
Параметр space применяется исключительно для логирования и красивого вывода.
Пользовательский «toJSON»
Как и toString для преобразования строк, объект может предоставлять метод toJSON для преобразования в JSON. JSON.stringify автоматически вызывает его, если он есть.
Как видим, date (1) стал строкой. Это потому, что все объекты типа Date имеют встроенный метод toJSON , который возвращает такую строку.
Теперь давайте добавим собственную реализацию метода toJSON в наш объект room (2) :
How To Work with JSON in JavaScript
Because JSON is derived from the JavaScript programming language, it is a natural choice to use as a data format in JavaScript. JSON, short for JavaScript Object Notation, is usually pronounced like the name “Jason.”
To learn more about JSON in general terms, read the “An Introduction to JSON” tutorial.
To begin thinking about where you may use JSON in your JavaScript programs, some general use cases of JSON include:
- Storing data
- Generating data structures from user input
- Transferring data from server to client, client to server, and server to server
- Configuring and verifying data
This tutorial will provide you with an introduction to working with JSON in JavaScript. To make the most use of this introduction, you should have some familiarity with the JavaScript programming language.
JSON Format
JSON’s format is derived from JavaScript object syntax, but it is entirely text-based. It is a key-value data format that is typically rendered in curly braces.
When you’re working with JSON, you’ll likely see JSON objects in a .json file, but they can also exist as a JSON object or string within the context of a program. Read more about the syntax and structure here.
When you’re working with a .json file, it will look like this:
If, instead, you have a JSON object in a .js or .html file, you’ll likely see it set to a variable:
Additionally, you may see JSON as a string rather than an object within the context of a JavaScript program file or script. In this case, you may also see it all on one line:
Converting JSON objects into strings can be particularly useful for transporting data in a quick manner.
We’ve gone over the general format of JSON and how you may expect to see it as a .json file, or within JavaScript as an object or a string.
Comparison to JavaScript Object
It is worth keeping in mind that JSON was developed to be used by any programming language, while JavaScript objects can only be worked with directly through the JavaScript programming language.
In terms of syntax, JavaScript objects are similar to JSON, but the keys in JavaScript objects are not strings in quotes. Also, JavaScript objects are less limited in terms of types passed to values, so they can use functions as values.
Let’s look at an example of a JavaScript object of the website user Sammy Shark who is currently online.
This will look very familiar to you as a JSON object, but there are no quotes around any of the keys ( first_name , last_name , online , or full_name ), and there is a function value in the last line.
If we want to access the data in the JavaScript object above, we could use dot notation to call user.first_name; and get a string, but if we want to access the full name, we would need to do so by calling user.full_name(); because it is a function.
JavaScript objects can only exist within the JavaScript language, so when you’re working with data that needs to be accessed by various languages, it is best to opt for JSON.
Accessing JSON Data
JSON data is normally accessed in Javascript through dot notation. To understand how this works, let’s consider the JSON object sammy :
In order to access any of the values, we’ll be using dot notation that looks like this:
The variable sammy is first, followed by a dot, followed by the key to be accessed.
To create a JavaScript alert that shows us the value associated with the key first_name in a pop-up, we can do so by calling the JavaScript alert() function:
Here, we’ve successfully called the value associated with the first_name key from the sammy JSON object.
We can also use square bracket syntax to access data from JSON. To do that, we would keep the key in double quotes within square brackets. For our sammy variable above, using square bracket syntax in an alert() function looks like this:
When you’re working with nested array elements, you should call the number of the item in your array. Let’s consider the JSON below:
To access the string facebook , we can call that item in the array within the context of dot notation:
Notice that for each nested element we’ll use an additional dot.
Using dot notation or square bracket syntax allows us to access the data contained in JSON format.
Functions for Working with JSON
This section will look at two methods for stringifying and parsing JSON. Being able to convert JSON from object to string and vice versa is useful for transferring and storing data.
JSON.stringify()
The JSON.stringify() function converts an object to a JSON string.
Strings are useful for transporting data from a client to a server through storing or passing information in a lightweight way. For example, you may gather a user’s settings on the client side and then send them to a server. Later, you can then read the information with the JSON.parse() method and work with the data as needed.
We’ll look at a JSON object that we assign to the variable obj , and then we’ll convert it using JSON.stringify() by passing obj to the function. We can assign this string to the variable s :
Now, if we work with s , we’ll have the JSON available to us as a string rather than an object.
The JSON.stringify() function lets us convert objects to strings. To do the opposite, we’ll look at the JSON.parse() function.
JSON.parse()
Strings are useful for transporting but you’ll want to be able to convert them back to a JSON object on the client and/or the server side. We can do this using the JSON.parse() function.
To convert the example in the JSON.stringify() section above, we would pass the string s to the function, and assign it to a new variable:
Then, we would have the object o to work with, which would be identical to the object obj .
To take a deeper look, let’s consider an example of JSON.parse() within the context of an HTML file:
Within the context of an HTML file, we can see how the JSON string s is converted to an object that is retrievable on the final rendering of the page by accessing the JSON via dot notation.
JSON.parse() is a secure function to parse JSON strings and convert them to objects.
Conclusion
JSON is a natural format to use in JavaScript and has many implementations available for use in many popular programming languages. If you want to use the format in another progamming language, you can see full language support on the “Introducing JSON” site.
Because it is lightweight and is readily transferred between programming languages and systems, JSON has been experiencing increased support in APIs, including the Twitter API.
You likely won’t be creating your own .json files but procuring them from other sources. You can check out these resources to learn about converting other data structures to JSON.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Tutorial Series: How To Code in JavaScript
JavaScript is a high-level, object-based, dynamic scripting language popular as a tool for making webpages interactive.
Использование JSON в JavaScript
JSON (JavaScript Object Notation) – это формат передачи данных. Из названия видно, что формат основан на языке программирования JavaScript, однако он доступен и в других языках (Python, Ruby, PHP, Java).
Читайте также: Основы работы с JSON
В программах JavaScript формат JSON обычно используется в следующих случаях:
- Хранение данных.
- Генерирование структур данных из пользовательского ввода.
- Обмен данными между сервером и клиентом.
- Настройка и проверка данных.
Это руководство познакомит вас с основами использования формата JSON в JavaScript.
Примечание: Руководство предполагает, что вы имеете базовые навыки работы с JavaScript.
Формат JSON
JSON основан на синтаксисе объектов JavaScript. Данные записываются в виде пар «ключ-значение» и помещаются в фигурные скобки.
При работе с JSON все объекты хранятся в файле .json, но также они могут существовать как отдельные объекты в контексте программы.
Читайте также: Основы работы с JSON
Файл .json выглядит так:
<
«first_name» : «John»,
«last_name» : «Smith»,
«online» : true
>Объект JSON в файлах .js или .html выглядит так:
var john = <
«first_name» : «John»,
«last_name» : «Smith»,
«online» : true
>Иногда JSON записывается в виде строки в контексте файла или сценария программы JavaScript.
Преобразование объекта JSON в строку используется для быстрой передачи данных.
Объекты JSON и JavaScript
Формат JSON разрабатывался для использования во всех языках программирования, а объекты JavaScript могут работать только в JavaScript.
Объекты JavaScript и JSON имеют похожий синтаксис. Однако в JavaScript ключи не представлены строками в кавычках. Также значения объектов JavaScript менее ограничены, чем в JSON, и могут выражаться функциями.
Объект JavaScript выглядит так:
var user = <
first_name: «John»,
last_name : «Smith»,
online : true,
full_name : function() <
return this.first_name + » » + this.last_name;
>
>;Как видите, в этом объекте не используются кавычки в ключах (first_name, last_name, online, full_name). Также в нём есть функция (последняя строка).
Чтобы получить доступ к данным JavaScript, нужно вызвать user.first_name с помощью точечной нотации. Это вернёт строку. Чтобы получить полное имя, нужно вызвать функцию user.full_name().
Объекты JavaScript существуют только в пределах языка JavaScript. Если ваши данные должны быть доступны и для других языков программирования, лучше использовать JSON.
Доступ к данным JSON
Данные JSON доступны в Javascript посредством точечной нотации. Чтобы понять, как это работает, рассмотрим такой пример объекта JSON:
var john = <
«first_name» : «John»,
«last_name» : «Smith»,
«online» : true
>Чтобы получить доступ к значениям, нужно использовать точечную нотацию:
john.first_name
john.last_name
john.onlineПеременная john указывается в начале, затем идёт точка и ключ, значение которого нужно извлечь.
Чтобы создать всплывающее предупреждение JavaScript, которое будет извлекать значение ключа first_name, используйте функцию alert():
Также для доступа к данным можно использовать квадратные скобки. При этом ключ нужно взять в кавычки. Попробуйте использовать это в функции alert():
При работе с вложенными массивами нужно вызывать элемент массива по номеру. Предположим, у нас есть такой массив:
var user_profile = <
«username» : «JohnSmith»,
«social_media» : [
<
«description» : «twitter»,
«link» : «https://twitter.com/johnsmith»
>,
<
«description» : «facebook»,
«link» : «https://www.facebook.com/JohnSmith»
>,
<
«description» : «github»,
«link» : «https://github.com/johnsmith»
>
] >Чтобы отобразить строку, которая содержит ссылку на facebook, нужно вызвать элемент массива в контексте точечной нотации:
Обратите внимание: для каждого вложенного элемента используется дополнительная точка.
Функции в JSON
При работе с JSON очень полезно иметь возможность быстро преобразовать строку в объект и наоборот. В этом разделе мы рассмотрим два метода JSON.
Функция JSON.stringify()
Функция JSON.stringify() преобразовывает объекты JSON в строки.
Строки позволяют упростить обмен данными между сервером и клиентом. К примеру, вы можете собирать настройки пользователей на стороне клиента, а затем передавать их на сервер. После этого вы сможете преобразовать строку в объект с помощью метода JSON.parse().
Рассмотрим объект, присвоенный переменной obj. Попробуйте преобразовать его в строку. Для этого нужно передать функции JSON.stringify() переменную obj. Присвойте эту строку переменной s.
Теперь объект стал строкой и является значением переменной s:
Функция JSON.parse()
Строки удобны при обмене данными, но потом их нужно снова преобразовать в объекты. Для этого используется функция JSON.parse().
Примечание: Чтобы преобразовать текст в объект, используйте функцию eval().
Теперь попробуйте преобразовать значение функции s в объект и присвоить его новой переменной:
var o = JSON.parse(s)
Теперь у вас есть объект o, идентичный объекту obj.
Рассмотрим ещё один пример. Функцию JSON.parse() можно использовать в контексте файла HTML:
В HTML-файле JSON-строка s преобразовывается в объект, который извлекается в финальный рендеринг с помощью точечной нотации.
Заключение
JSON обычно используется в JavaScript, однако этот формат широко применяется в других языках программирования.
Больше информации о совместимости и обработке JSON можно найти на сайте проекта.
Сегодня JSON часто используется в API.
Читайте также:
Писать JSON с нуля приходится редко. Обычно данные загружаются из исходников или преобразовываются в JSON. Потому знать, как использовать JSON в программе важнее, чем уметь писать такие файлы.