Расширение файла JSON

Тип файла Файл нотации объектов JavaScript

Разработчик Н/Д
Популярность
4,0 (2589 голосов)
Категория Веб-файлы
Формат Текст

Что такое файл JSON?

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

Дополнительная информация

Файл JSON открыт в GitHub Atom

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

Хотя многие приложения используют JSON для обмена данными, они могут не сохранять файлы .json на жестком диске, поскольку обмен данными происходит между подключенными к Интернету компьютеры. Однако некоторые приложения позволяют пользователям сохранять файлы .json. Одним из примеров является Google+, который использует файлы JSON для сохранения данных профиля. После входа в систему вы можете выбрать страницу «Освобождение данных» и выбрать «Загрузить данные профиля».

Mozilla Firefox сохраняет резервные копии закладок с помощью файлов JSON. Файлы сохраняются в каталоге профиля пользователя Firefox в папке, называемой резервными копиями закладок. Вы также можете вручную создавать резервные копии закладок Firefox и импортировать их в другую копию Firefox. Для импорта откройте библиотеку закладок, нажмите кнопку импорта/экспорта на верхней панели, выберите «Восстановить» → «Выбрать файл …», а затем выберите файл резервной копии JSON.

Как открыть файл JSON?

Поскольку файлы JSON представляют собой простые текстовые файлы, вы можете открывать их в любом текстовом редакторе, включая:

  • Блокнот Microsoft (Windows)
  • Apple TextEdit (Mac)
  • Vim (Linux)
  • GitHub Atom (кросс- platform)

Вы также можете открыть файл JSON в веб-браузерах Google Chrome и Mozilla Firefox, перетащив его в окно браузера.

СКАЧАТЬ БЕСПЛАТНО

Открывать и просматривать файлы .JSON с помощью File Viewer Plus.

Программы, открывающие файлы JSON

X

Windows

File Viewer Plus

Бесплатная пробная версия

Altova XMLSpy

Бесплатная пробная версия

Блокнот Microsoft

В комплекте

Microsoft WordPad

В комплекте

Notepad ++

Бесплатно

Github Atom

Бесплатно

Другой текстовый редактор
Mozilla Firefox

Бесплатно

Google Chrome

Бесплатно

Mac

Apple TextEdit

Включено

MacVim

Бесплатно

Github Atom

Бесплатно

Другой текстовый редактор
Mozilla Firefox

Бесплатно

Google Chrome

Бесплатно

Linux

Vim

Бесплатно

Pico

Бесплатно

GNU Emacs

Бесплатно

Github Atom

Бесплатно

Другой текстовый редактор
Mozilla Firefox

Бесплатно

Google Chrome

Бесплатно

iOS

Google Chrome

Бесплатно

Mozilla Firefox

Бесплатно

Android

Средство просмотра файлов для Android

Бесплатно +

Google Chrome

Бесплатно

Mozilla Firefox

Бесплатно

Обновлено 04.01.2021


Работа с JSON

  • Предыдущий
  • Обзор: объекты
  • Далее

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

Предварительные требования: Базовая компьютерная грамотность, базовое понимание HTML и CSS, знакомство с основами JavaScript (см. Первые шаги и Строительные блоки) и основы OOJS (см. Введение в объекты).
Цель: Чтобы понять, как работать с данными, хранящимися в JSON, и создавать свои собственные строки JSON.

Нет, правда, что такое JSON?

JSON — это текстовый формат данных, следующий за синтаксисом объектов JavaScript, который популяризировал Дуглас Крокфорд. Несмотря на то, что он очень похож на синтаксис литерала объекта JavaScript, его можно использовать независимо от JavaScript, и многие среды программирования имеют возможность читать (анализировать) и генерировать JSON.

JSON существует в виде строки — полезно когда вы хотите передавать данные по сети. Если вы хотите получить доступ к данным, его необходимо преобразовать в собственный объект JavaScript. Это не большая проблема — JavaScript предоставляет глобальный объект JSON, у которого есть методы для преобразования между ними.

Примечание : преобразование преобразование строки в собственный объект называется десериализацией , а преобразование собственного объекта в строку для передачи по сети называется сериализацией .

Строка JSON может храниться в собственном файле, который в основном представляет собой текстовый файл с расширением .json и типом MIME application/json .

Структура JSON

Как описано выше, JSON — это строка, format очень похож на формат литерала объекта JavaScript. Вы можете включать в JSON те же основные типы данных, что и в стандартный объект JavaScript — строки, числа, массивы, логические значения и другие объектные литералы.. Это позволяет вам построить иерархию данных, например:

  '{"squadName": "Команда супергероев", "homeTown": "Metro City", "сформированный"  : 2016, "secretBase": "Супер башня", "active": true, "members": [{"name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers  ": [" Радиационная стойкость "," Превращение крошечного "," Радиационный взрыв "]}, {" name ":" Мадам Апперкот "," возраст ": 39," secretIdentity ":" Джейн Уилсон "," powers ": [  «Удар в миллион тонн», «Устойчивость к повреждениям», «Сверхчеловеческие рефлексы»]}, {«name»: «Вечный огонь», «age»: 1000000, «secretIdentity»: «Неизвестно», «powers»: [«Бессмертие»  , «Тепловой иммунитет», «Инферно», «Телепортация», «Межпространственное путешествие»]}]} ' 

Если мы загрузили эту строку в программу JavaScript, разобрали ее в переменная с именем superHeroes , например, мы могли бы затем получить доступ к данным внутри нее, используя ту же нотацию точек/скобок, которую мы рассматривали в статье об основах объектов JavaScript. Например:

  superHeroes.homeTownsuperHeroes ['active']  

Чтобы получить доступ к данным ниже по иерархии, вы должны связать вместе требуемые имена свойств и индексы массивов. Например, чтобы получить доступ к третьей суперсиле второго героя, указанного в списке участников, вы должны сделать следующее:

  superHeroes ['members'] [1] ['powers  '] [2]  
  1. Сначала у нас есть имя переменной — superHeroes .
  2. Внутри этого мы хотим получить доступ к свойству members , поэтому мы используем ["members"] .
  3. members содержит массив, заполненный объектами. Мы хотим получить доступ ко второму объекту внутри массива, поэтому мы используем [1] .
  4. Внутри этого объекта мы хотим получить доступ к powers , поэтому мы используем ["powers"] .
  5. Внутри свойства powers находится массив содержащий суперсилы выбранного героя. Нам нужен третий, поэтому мы используем [2pting.

Примечание : Мы сделали JSON, показанный выше, доступным внутри переменной в нашем примере JSONTest.html (см. Исходный код). Попробуйте загрузить это, а затем получить доступ к данным внутри переменной через консоль JavaScript вашего браузера.

Массивы как JSON

Выше мы упоминали, что текст JSON в основном выглядит как объект JavaScript внутри строки. Мы также можем конвертировать массивы в/из JSON. Ниже также допустимый JSON, например:

  '[{"name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes",  "powers": ["Радиационная стойкость", "Превращение крошечного", "Радиационный взрыв"]}, {"name": "Мадам Апперкот", "age": 39, "secretIdentity": "Джейн Уилсон", "Powers"  : [«Удар в миллион тонн», «Устойчивость к повреждениям», «Сверхчеловеческие рефлексы»]}] ' 

Вышеупомянутое является вполне допустимым JSON. Вам просто нужно будет получить доступ к элементам массива (в его проанализированной версии), начав с индекса массива, например [0] ["powers"] [0] .

Другие примечания

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

Активное обучение: работа с примером JSON

Итак, давайте рассмотрим пример, чтобы показать, как мы можем использовать некоторые данные в формате JSON на веб-сайте.

Начало работы

Для начала сделайте локальные копии нашего heroes.html и файлы style.css. Последний содержит простой CSS для стилизации нашей страницы, а первый содержит очень простой основной HTML:

  

Плюс элемент , содержащий код JavaScript, который мы будем писать в этом упражнении. На данный момент он содержит только две строки, которые захватывают ссылки на элементы

и

и сохраняют их в переменных:

  const header = document.querySelector ('header'); const section = document.querySelector ('section');  

Мы сделали наши данные JSON доступны на нашем GitHub по адресу https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

Мы собираемся загрузить их в наш страницу и используйте несколько изящных манипуляций с DOM, чтобы отобразить ее, например:

Получение JSON

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

  1. Для начала мы сохраняем URL-адрес JSON, который мы хотим получить, в переменной. Добавьте следующее внизу своего кода JavaScript:
      let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';  
  2. Чтобы создать запрос, нам нужно создать новый экземпляр объекта запроса из конструктора XMLHttpRequest , используя новое ключевое слово. Добавьте следующее под вашей последней строкой:
      let request = new XMLHttpRequest ();  
  3. Теперь нам нужно открыть запрос с помощью метода open () . Добавьте следующую строку:
      request.open ('GET', requestURL);  

    Это принимает как минимум два параметра — есть другие необязательные доступные параметры. В этом простом примере нам нужны только два обязательных:

    • Метод HTTP, который будет использоваться при выполнении сетевого запроса. В этом случае GET подойдет, поскольку мы просто получаем некоторые простые данные.
    • URL-адрес, на который будет сделан запрос — это URL-адрес файла JSON. который мы сохранили ранее.
  4. Затем добавьте следующие две строки — здесь мы устанавливаем для responseType значение JSON, чтобы XHR знает, что сервер будет возвращать JSON, и что он должен быть незаметно преобразован в объект JavaScript. Затем мы отправляем запрос с помощью метода send () :
      request.responseType = 'json'; request.send ();  
  5. Последний бит этого раздела включает ожидание ответа от сервера, а затем его обработку. Добавьте следующий код под предыдущим кодом:
      request.onload = function () {const superHeroes = request.response;  populateHeader (супергерои);  showHeroes (superHeroes);}  

Здесь мы сохраняем ответ на наш запрос (доступен в response свойство) в переменной с именем superHeroes ; эта переменная теперь содержит объект JavaScript на основе JSON! Затем мы передаем этот объект двум вызовам функций — первая заполняет header> правильными данными, а вторая создает информационную карточку для каждого героя в команде и вставляет его в

.

Мы обернули код в обработчик событий, который запускается, когда событие загрузки запускается для объекта запроса (см. onload ) — это потому, что событие загрузки запускается когда ответ был успешно возвращен; такой способ гарантирует, что request.response обязательно будет доступен, когда мы попытаемся что-то с ним сделать.

Заполнение заголовка

Теперь, когда мы получили данные JSON и преобразовали их в объект JavaScript, давайте воспользуемся ими, написав две функции, на которые мы ссылались выше. Прежде всего, добавьте следующее определение функции под предыдущим кодом:

  function populateHeader (obj) {const myH1 = document.createElement ('h1');  myH1.textContent = obj ['имя отряда'];  header.appendChild (myH1);  const myPara = document.createElement ('p');  myPara.textContent = 'Hometown:' + obj ['homeTown'] + '//Образовано:' + obj ['сформировано'];  header.appendChild (myPara);}  

Здесь мы сначала создаем элемент

с помощью createElement () , установите его textContent равным свойству squadName объекта, затем добавьте его в заголовок с помощью appendChild () код>. Затем мы делаем очень похожую операцию с абзацем: создаем его, устанавливаем его текстовое содержимое и добавляем его в заголовок. Единственное отличие состоит в том, что его текст установлен как объединенная строка, содержащая как свойства homeTown , так и formed объекта.

Создание карточек с информацией о героях

Затем добавьте в нижнюю часть кода следующую функцию, которая создает и отображает карточки супергероев:

  function showHeroes (obj) {const heroes = obj ['members'];  для (пусть я = 0; я  

Для начала мы сохраняем свойство members объекта JavaScript в новой переменной.. Этот массив содержит несколько объектов, которые содержат информацию для каждого героя.

Затем мы используем цикл for для перебора каждого объекта в массиве. Для каждого из них мы:

  1. Создаем несколько новых элементов:

    ,

    , три

    и

    .

  2. Установите , чтобы содержать имя текущего героя.
  3. Заполните три абзаца их secretIdentity , age и строку «Superpowers:», чтобы ввести информацию в список.
  4. Сохраните свойство powers в другом новом константа с именем superPowers — она ​​содержит массив, в котором перечислены суперсилы текущего героя.
  5. Используйте другой цикл for , чтобы пройти через суперсилы текущего героя — для каждого из них мы создаем элемент
  6. , помещаем в него суперсилу, а затем помещаем listItem внутри

    element ( myList ) с использованием appendChild () .

  7. Последнее, что мы делаем, это чтобы добавить

    e>,

    s и

    внутри

    ( myArticle ), затем добавьте

    внутри

    . Порядок, в котором добавляются элементы, важен, поскольку именно в этом порядке они будут отображаться в HTML.

Примечание : Если у вас возникли проблемы с тем, чтобы пример работал, попробуйте обратиться к нашему исходному коду heroes-finished.html (также посмотрите, как он работает в реальном времени.)

Примечание : если у вас возникли проблемы с использованием обозначения точки/скобки, которое мы используем для доступа к объекту JavaScript, может помочь открыть файл superheroes.json на другой вкладке или в текстовом редакторе, и обращайтесь к нему при просмотре нашего JavaScript. Вам также следует вернуться к нашей статье об основах объектов JavaScript для получения дополнительной информации о нотации точек и скобок.

Преобразование между объектами и текстом

Приведенный выше пример был прост с точки зрения доступа к объекту JavaScript, потому что мы установили запрос XHR для преобразования ответа JSON непосредственно в объект JavaScript, используя:

  request.responseType = 'json';  

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

  • parse () : принимает строку JSON в качестве параметра и возвращает соответствующий объект JavaScript.
  • stringify () : принимает объект в качестве параметра , и возвращает эквивалентную строку JSON.

Вы можете увидеть первую в действии в нашем примере heroes-finished-json-parse.html (см. исходный код) — это действительно точно так же, как в примере, который мы создали ранее, за исключением того, что мы установили XHR для возврата необработанного текста JSON, а затем использовали parse () для преобразования его в реальный объект JavaScript. Ключевой фрагмент кода находится здесь:

  request.open ('GET', requestURL); request.responseType = 'text'; //теперь мы получаем строку! request.send (); request.onload = function () {const superHeroesText = request.response; //получаем строку из ответа const superHeroes = JSON.parse (superHeroesText); //преобразовываем его в объект populateHeader (superHeroes);  showHeroes (superHeroes);}  

Как вы могли догадаться, stringify () работает наоборот. Попробуйте ввести следующие строки в консоль JavaScript вашего браузера одну за другой, чтобы увидеть ее в действии:

  let myObj = {name: "Chris", age: 38}; myObjlet myString  = JSON.stringify (myObj); myString  

Здесь мы создаем объект JavaScript, затем проверяем, что он содержит, а затем преобразуем его в строку JSON с помощью stringify () — сохранение возвращаемого значения в новой переменной, а затем повторная проверка.

Проверьте свои навыки!

Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше — см. Проверка своих навыков: JSON.

Резюме

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

См. Также

  • Справочная страница JSON
  • Справочная страница объекта XMLHttpRequest
  • Использование XMLHttpRequest
  • методов HTTP-запроса
  • Официальный JSON веб-сайт со ссылкой на стандарт ECMA
  • Предыдущий
  • Обзор: объекты
  • Далее

В этом модуле

  • Основы работы с объектами
  • Объектно-ориентированный JavaScript для начинающих
  • Прототипы объектов
  • Наследование в JavaScript
  • Работа с данными JSON
  • Практика построения объектов
  • Добавление функций в нашу демонстрацию прыгающих мячей
Оцените статью
logicle.ru
Добавить комментарий