Как подключить json файл к javascript
Перейти к содержимому

Как подключить json файл к javascript

  • автор:

Как подключить json файл к javascript

JSON представляет один из наиболее популярных форматов хранения и передачи данных. Особенно часто JSON используется при передачи данных через ajax-запросы. Для получения json с помощью XMLHttpRequest следует выполнить две настройки:

    Чтобы ответ сервера рассматривался как объект json, свойству responseType передается значение «json». Браузеры, которые поддерживают это значение, гарантируют, что ответ может быть прочитан непосредственно как объект JavaScript.

xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");

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

Итак, определим для проекта на жестком диске папку, в которой создадим три файла:

  • index.html : главная страница приложения
  • data.json : файл с данными в формате json
  • app.js : файл приложения сервера, который будет использовать Node.js

Определение данных

Файл data.json будет представлять загружаемые данные и пусть будет иметь следующее содержимое:

Здесь элемент users представляет набор пользователей, каждый из которых представлен элементом user. Для каждого такого элемента определены два атрибута: name (имя пользователя) и age (возраст пользователя). И также элемент user имеет вложенный элемент contacts, который представляет контактные данные пользователя в виде вложенных элементов phone и email.

Определение сервера

Файл app.js будет представлять код сервера Node.js. Определим в нем следующий код:

const http = require("http"); const fs = require("fs"); http.createServer((request, response)=> < // если запрошены данные xml if(request.url == "/data")< fs.readFile("data.json", (_, data) =>response.end(data)); > else < fs.readFile("index.html", (_, data) =>response.end(data)); > >).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));

Вкратце пробежимся по коду. Сначала подключаются пакеты с функциональностью, которую мы собираемся использовать:

const http = require("http"); // для обработки входящих запросов const fs = require("fs"); // для чтения файлов с жесткого диска

Для создания сервера применяется функция http.createServer() . В эту функцию передается функция-обработчик, которая вызывается каждый раз, когда к серверу приходит запрос. Эта функция имеет два параметра: request (содержит данные запроса) и response (управляет отправкой ответа).

В функции-обработчике с помощью свойства request.url мы можем получить путь к ресурсу, к которому пришел запрос. Так, в данном случае, если пришел запрос по пути «/data», то оправляем data.json :

if(request.url == "/data") < fs.readFile("data.json", (_, data) =>response.end(data)); >

Для считывания файла применяется функция fs.readFile . Первый параметр функции — адрес файла (в данном случае предполагается, что файл находится в одной папке с файлом сервера server.js). Второй параметр — функция, которая вызывается после считывания файла и получет его содержимое через свой второй параметр data.

Для всех остальных запросов отправляем в ответ файл index.html :

else < fs.readFile("index.html", (_, data) =>response.end(data)); >

В конце с помощью функции listen() запускаем веб-сервер на 3000 порту. То есть сервер будет запускаться по адресу http://localhost:3000/

Загрузка JSON на веб-странице

Для получения файла «data.json» с сервера определим в файле index.html следующий код:

    METANIT.COM      

Для получения данных отправляем запрос по адресу «/data». Чтобы полученные данные автоматически были распарсены в документ JSON, свойству responseType присваиваем значение «json».

xhr.responseType = "json";

Кроме того, следует установить для заголовка Accept значение «application/json»:

xhr.setRequestHeader("Accept", "application/json");

В обработчике события onload объект JSON доступен через свойство response , который в данном случае просто выводится на консоль:

xhr.onload = () => < if (xhr.status == 200) < const json = xhr.response; console.log(json); >>;

После определения всех файлов в консоли перейдем к папке сервера с помощью команды cd и запустим сервер с помощью команды node server.js

C:\app>node server.js Сервер запущен по адресу http://localhost:3000

После запуска сервера мы можем перейти в браузере по адресу http://localhost:3000, нам отобразится страница, в javascript-коде произойдет обращение по адресу «/data». Сервер в ответ отправит содержимое файла data.json, и консоль барузера отобразит это содержимое:

Получение объектов json с помощью XMLHttpRequest в javascript

Вывод данных JSON на страницу

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

    METANIT.COM   const contentDiv = document.getElementById("content"); const xhr = new XMLHttpRequest(); xhr.onload = () => < if (xhr.status == 200) < const json = xhr.response; const table = createTable(); // выбираем все элементы user const users = json.users; for (let i = 0; i < users.length; i++) < const user = users[i]; const row = createRow(user.name, user.age, user.contacts.email); table.appendChild(row); >contentDiv.appendChild(table); > >; xhr.open("GET", "/data"); xhr.responseType = "document"; xhr.setRequestHeader("Accept", "text/xml"); xhr.send(); // создаем таблицу function createTable() < const table = document.createElement("table"); const headerRow = document.createElement("tr"); const nameColumnHeader = document.createElement("th"); const ageColumnHeader = document.createElement("th"); const contactColumnHeader = document.createElement("th"); nameColumnHeader.appendChild(document.createTextNode("Name")); ageColumnHeader.appendChild(document.createTextNode("Age")); contactColumnHeader.appendChild(document.createTextNode("Contacts")); headerRow.appendChild(nameColumnHeader); headerRow.appendChild(ageColumnHeader); headerRow.appendChild(contactColumnHeader); table.appendChild(headerRow); return table; >// создаем одну строку для таблицы function createRow(userName, userAge, userContact)  

В данном случае загружаем таблицу на страницу в элемент с идентификатором «content», который получаем в коде JavaScript в элемент contentDiv

const contentDiv = document.getElementById("content");

Для создания таблицы определены две вспомогательные функции. Функция createTable создает элемент table с одной строкой — заголовками столбцов. Функция createRow принимает через параметры имя, возраст и контакты пользователя и для них создает строку.

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

const json = xhr.response; const table = createTable(); // выбираем все объекты user const users = json.users;

Далее перебираем все объекты user, выбираем у каждого объекта свойства name, age и contacts.email и создаем по ним строку в таблице:

for (let i = 0; i

Таким образом, при обращении к странице index.html будут загружены данные в формате JSON, и по ним будет создана таблица:

Формат JSON, метод toJSON

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

Естественно, такая строка должна включать в себя все важные свойства.

Мы могли бы реализовать преобразование следующим образом:

let user = < name: "John", age: 30, toString() < return `", age: $>`; > >; alert(user); //

…Но в процессе разработки добавляются новые свойства, старые свойства переименовываются и удаляются. Обновление такого toString каждый раз может стать проблемой. Мы могли бы попытаться перебрать свойства в нём, но что, если объект сложный, и в его свойствах имеются вложенные объекты? Мы должны были бы осуществить их преобразование тоже.

К счастью, нет необходимости писать код для обработки всего этого. У задачи есть простое решение.

JSON.stringify

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

JavaScript предоставляет методы:

  • JSON.stringify для преобразования объектов в JSON.
  • JSON.parse для преобразования JSON обратно в объект.

Например, здесь мы преобразуем через JSON.stringify данные студента:

let student = < name: 'John', age: 30, isAdmin: false, courses: ['html', 'css', 'js'], wife: null >; let json = JSON.stringify(student); alert(typeof json); // мы получили строку! alert(json); /* выведет объект в формате JSON: < "name": "John", "age": 30, "isAdmin": false, "courses": ["html", "css", "js"], "wife": null >*/

Метод JSON.stringify(student) берёт объект и преобразует его в строку.

Полученная строка json называется JSON-форматированным или сериализованным объектом. Мы можем отправить его по сети или поместить в обычное хранилище данных.

Обратите внимание, что объект в формате JSON имеет несколько важных отличий от объектного литерала:

  • Строки используют двойные кавычки. Никаких одинарных кавычек или обратных кавычек в JSON. Так ‘John’ становится «John» .
  • Имена свойств объекта также заключаются в двойные кавычки. Это обязательно. Так age:30 становится «age»:30 .

JSON.stringify может быть применён и к примитивам.

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

  • Объекты
  • Массивы [ . ]
  • Примитивы:
    • строки,
    • числа,
    • логические значения true/false ,
    • null .
    // число в JSON остаётся числом alert( JSON.stringify(1) ) // 1 // строка в JSON по-прежнему остаётся строкой, но в двойных кавычках alert( JSON.stringify('test') ) // "test" alert( JSON.stringify(true) ); // true alert( JSON.stringify([1, 2, 3]) ); // [1,2,3]

    JSON является независимой от языка спецификацией для данных, поэтому JSON.stringify пропускает некоторые специфические свойства объектов JavaScript.

    • Свойства-функции (методы).
    • Символьные ключи и значения.
    • Свойства, содержащие undefined .
    let user = < sayHi() < // будет пропущено alert("Hello"); >, [Symbol("id")]: 123, // также будет пропущено something: undefined // как и это - пропущено >; alert( JSON.stringify(user) ); // <> (пустой объект)

    Обычно это нормально. Если это не то, чего мы хотим, то скоро мы увидим, как можно настроить этот процесс.

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

    let meetup = < title: "Conference", room: < number: 23, participants: ["john", "ann"] >>; alert( JSON.stringify(meetup) ); /* вся структура преобразована в строку: < "title":"Conference", "room":, > */

    Важное ограничение: не должно быть циклических ссылок.

    let room = < number: 23 >; let meetup = < title: "Conference", participants: ["john", "ann"] >; meetup.place = room; // meetup ссылается на room room.occupiedBy = meetup; // room ссылается на meetup JSON.stringify(meetup); // Ошибка: Преобразование цикличной структуры в JSON

    Здесь преобразование завершается неудачно из-за циклической ссылки: room.occupiedBy ссылается на meetup , и meetup.place ссылается на room :

    Исключаем и преобразуем: replacer

    Полный синтаксис JSON.stringify :

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

    value Значение для кодирования. replacer Массив свойств для кодирования или функция соответствия function(key, value) . space Дополнительное пространство (отступы), используемое для форматирования.

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

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

    let room = < number: 23 >; let meetup = < title: "Conference", participants: [, ], place: room // meetup ссылается на room >; room.occupiedBy = meetup; // room ссылается на meetup alert( JSON.stringify(meetup, ['title', 'participants']) ); // <"title":"Conference","participants":[<>,<>]>

    Здесь мы, наверное, слишком строги. Список свойств применяется ко всей структуре объекта. Так что внутри participants – пустые объекты, потому что name нет в списке.

    Давайте включим в список все свойства, кроме room.occupiedBy , из-за которого появляется цикличная ссылка:

    let room = < number: 23 >; let meetup = < title: "Conference", participants: [, ], place: room // meetup ссылается на room >; room.occupiedBy = meetup; // room ссылается на meetup alert( JSON.stringify(meetup, ['title', 'participants', 'place', 'name', 'number']) ); /* < "title":"Conference", "participants":[,], "place": > */

    Теперь всё, кроме occupiedBy , сериализовано. Но список свойств довольно длинный.

    К счастью, в качестве replacer мы можем использовать функцию, а не массив.

    Функция будет вызываться для каждой пары (key, value) , и она должна возвращать заменённое значение, которое будет использоваться вместо исходного. Или undefined , чтобы пропустить значение.

    В нашем случае мы можем вернуть value «как есть» для всего, кроме occupiedBy . Чтобы игнорировать occupiedBy , код ниже возвращает undefined :

    let room = < number: 23 >; let meetup = < title: "Conference", participants: [, ], place: room // meetup ссылается на room >; room.occupiedBy = meetup; // room ссылается на meetup alert( JSON.stringify(meetup, function replacer(key, value) < alert(`$: $`); return (key == 'occupiedBy') ? undefined : value; >)); /* пары ключ:значение, которые приходят в replacer: : [object Object] title: Conference participants: [object Object],[object Object] 0: [object Object] name: John 1: [object Object] name: Alice place: [object Object] number: 23 occupiedBy: [object Object] */

    Обратите внимание, что функция replacer получает каждую пару ключ/значение, включая вложенные объекты и элементы массива. И она применяется рекурсивно. Значение this внутри replacer – это объект, который содержит текущее свойство.

    Первый вызов – особенный. Ему передаётся специальный «объект-обёртка»: . Другими словами, первая (key, value) пара имеет пустой ключ, а значением является целевой объект в общем. Вот почему первая строка из примера выше будет «:[object Object]» .

    Идея состоит в том, чтобы дать как можно больше возможностей replacer – у него есть возможность проанализировать и заменить/пропустить даже весь объект целиком, если это необходимо.

    Форматирование: space

    Третий аргумент в JSON.stringify(value, replacer, space) – это количество пробелов, используемых для удобного форматирования.

    Ранее все JSON-форматированные объекты не имели отступов и лишних пробелов. Это нормально, если мы хотим отправить объект по сети. Аргумент space используется исключительно для вывода в удобочитаемом виде.

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

    let user = < name: "John", age: 25, roles: < isAdmin: false, isEditor: true >>; alert(JSON.stringify(user, null, 2)); /* отступ в 2 пробела: < "name": "John", "age": 25, "roles": < "isAdmin": false, "isEditor": true >> */ /* для JSON.stringify(user, null, 4) результат содержит больше отступов: < "name": "John", "age": 25, "roles": < "isAdmin": false, "isEditor": true >> */

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

    Параметр space применяется исключительно для логирования и красивого вывода.

    Пользовательский «toJSON»

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

    let room = < number: 23 >; let meetup = < title: "Conference", date: new Date(Date.UTC(2017, 0, 1)), room >; alert( JSON.stringify(meetup) ); /* < "title":"Conference", "date":"2017-01-01T00:00:00.000Z", // (1) "room": // (2) > */

    Как видим, date (1) стал строкой. Это потому, что все объекты типа Date имеют встроенный метод toJSON , который возвращает такую строку.

    Теперь давайте добавим собственную реализацию метода toJSON в наш объект room (2) :

    let room = < number: 23, toJSON() < return this.number; >>; let meetup = < title: "Conference", room >; alert( JSON.stringify(room) ); // 23 alert( JSON.stringify(meetup) ); /* < "title":"Conference", "room": 23 >*/

    Как видите, toJSON используется как при прямом вызове JSON.stringify(room) , так и когда room вложен в другой сериализуемый объект.

    JSON.parse

    Чтобы декодировать JSON-строку, нам нужен другой метод с именем JSON.parse.

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

    str JSON для преобразования в объект. reviver Необязательная функция, которая будет вызываться для каждой пары (ключ, значение) и может преобразовывать значение.

    // строковый массив let numbers = "[0, 1, 2, 3]"; numbers = JSON.parse(numbers); alert( numbers[1] ); // 1

    Или для вложенных объектов:

    let user = '< "name": "John", "age": 35, "isAdmin": false, "friends": [0,1,2,3] >'; user = JSON.parse(user); alert( user.friends[1] ); // 1

    JSON может быть настолько сложным, насколько это необходимо, объекты и массивы могут включать другие объекты и массивы. Но они должны быть в том же JSON-формате.

    Вот типичные ошибки в написанном от руки JSON (иногда приходится писать его для отладки):

    let json = `< name: "John", // Ошибка: имя свойства без кавычек "surname": 'Smith', // Ошибка: одинарные кавычки в значении (должны быть двойными) 'isAdmin': false, // Ошибка: одинарные кавычки в ключе (должны быть двойными) "birthday": new Date(2000, 2, 3), // Ошибка: не допускается конструктор "new", только значения "gender": "male" // Ошибка: отсутствует запятая после непоследнего свойства "friends": [0,1,2,3], // Ошибка: не должно быть запятой после последнего свойства >`;

    Кроме того, JSON не поддерживает комментарии. Добавление комментария в JSON делает его недействительным.

    Существует ещё один формат JSON5, который поддерживает ключи без кавычек, комментарии и т.д. Но это самостоятельная библиотека, а не спецификация языка.

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

    Использование reviver

    Представьте, что мы получили объект meetup с сервера в виде строки данных.

    // title: (meetup title), date: (meetup date) let str = '';

    …А теперь нам нужно десериализовать её, т.е. снова превратить в объект JavaScript.

    Давайте сделаем это, вызвав JSON.parse :

    let str = ''; let meetup = JSON.parse(str); alert( meetup.date.getDate() ); // Ошибка!

    Значением meetup.date является строка, а не Date объект. Как JSON.parse мог знать, что он должен был преобразовать эту строку в Date ?

    Давайте передадим JSON.parse функцию восстановления вторым аргументом, которая возвращает все значения «как есть», но date станет Date :

    let str = ''; let meetup = JSON.parse(str, function(key, value) < if (key == 'date') return new Date(value); return value; >); alert( meetup.date.getDate() ); // 30 - теперь работает!

    Кстати, это работает и для вложенных объектов:

    let schedule = `< "meetups": [ , ] >`; schedule = JSON.parse(schedule, function(key, value) < if (key == 'date') return new Date(value); return value; >); alert( schedule.meetups[1].date.getDate() ); // 18 - отлично!

    Итого

    • JSON – это формат данных, который имеет собственный независимый стандарт и библиотеки для большинства языков программирования.
    • JSON поддерживает простые объекты, массивы, строки, числа, логические значения и null .
    • JavaScript предоставляет методы JSON.stringify для сериализации в JSON и JSON.parse для чтения из JSON.
    • Оба метода поддерживают функции преобразования для интеллектуального чтения/записи.
    • Если объект имеет метод toJSON , то он вызывается через JSON.stringify .

    Задачи

    Преобразуйте объект в JSON, а затем обратно в обычный объект

    важность: 5

    Преобразуйте user в JSON, затем прочитайте этот JSON в другую переменную.

    let user = < name: "Василий Иванович", age: 35 >;

    Работа с 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 — строки, числа, массивы, булевы и другие объектные литералы. Это позволяет построить иерархию данных, к примеру, так:

     "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [  "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"] >,  "name": "Madame Uppercut", "age": 39, "secretIdentity": "Jane Wilson", "powers": [ "Million tonne punch", "Damage resistance", "Superhuman reflexes" ] >,  "name": "Eternal Flame", "age": 1000000, "secretIdentity": "Unknown", "powers": [ "Immortality", "Heat Immunity", "Inferno", "Teleportation", "Interdimensional travel" ] > ] > 

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

    .homeTown; superHeroes["active"]; 

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

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

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

    Массивы как JSON

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

    [  "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"] >,  "name": "Madame Uppercut", "age": 39, "secretIdentity": "Jane Wilson", "powers": [ "Million tonne punch", "Damage resistance", "Superhuman reflexes" ] > ] 

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

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

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

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

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

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

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

    header>header> section>section> 
    var header = document.querySelector("header"); var section = document.querySelector("section"); 

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

    Получение JSON

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

      Начнём с того, что мы собираемся сохранить URL-адрес JSON, который мы хотим получить в переменной. Добавьте нижеследующий код JavaScript:

    var requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json"; 
    var request = new XMLHttpRequest(); 
    .open("GET", requestURL); 
    • Метод HTTP, который следует использовать при выполнении сетевого запроса. В этом случае GET самый подходящий, так как мы просто извлекаем некоторые простые данные.
    • URL-адрес для запроса — это URL-адрес файла JSON, который мы сохранили ранее.
    .responseType = "json"; request.send(); 
    .onload = function ()  var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); >; 

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

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

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

    function populateHeader(jsonObj)  var header = document.querySelector("header"); var myH1 = document.createElement("h1"); myH1.textContent = jsonObj["squadName"]; header.appendChild(myH1); var myPara = document.createElement("p"); myPara.textContent = "Hometown: " + jsonObj["homeTown"] + " // Formed: " + jsonObj["formed"]; header.appendChild(myPara); > 

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

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

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

    function showHeroes(jsonObj)  var section = document.querySelector("section"); var heroes = jsonObj["members"]; for (var i = 0; i  heroes.length; i++)  var myArticle = document.createElement("article"); var myH2 = document.createElement("h2"); var myPara1 = document.createElement("p"); var myPara2 = document.createElement("p"); var myPara3 = document.createElement("p"); var myList = document.createElement("ul"); myH2.textContent = heroes[i].name; myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity; myPara2.textContent = "Age: " + heroes[i].age; myPara3.textContent = "Superpowers:"; var superPowers = heroes[i].powers; for (var j = 0; j  superPowers.length; j++)  var listItem = document.createElement("li"); listItem.textContent = superPowers[j]; myList.appendChild(listItem); > myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); > > 

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

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

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

      и
      .

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

      и
      внутри ( myArticle ), а затем добавляем в . Важное значение имеет порядок, в котором добавляются элементы, так как это порядок, который они будут отображать внутри HTML.

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

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

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

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

    .responseType = "json"; 

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

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

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

    .open("GET", requestURL); request.responseType = "text"; // now we're getting a string! request.send(); request.onload = function ()  var superHeroesText = request.response; // get the string from the response var superHeroes = JSON.parse(superHeroesText); // convert it to an object populateHeader(superHeroes); showHeroes(superHeroes); >; 

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

    var myJSON =  name: "Chris", age: "38" >; myJSON; var myString = JSON.stringify(myJSON); myString; 

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

    Резюме

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

    Смотрите также

    • JSON object reference page
    • XMLHttpRequest object reference page
    • Using XMLHttpRequest
    • HTTP request methods
    • Official JSON web site with link to ECMA standard
    • Назад
    • Обзор: Objects
    • Далее

    Found a content problem with this page?

    • Edit the page on GitHub.
    • Report the content issue.
    • View the source on GitHub.

    This page was last modified on 3 дек. 2023 г. by MDN contributors.

    Your blueprint for a better internet.

    Как правильно подключить .json файл в проект?

    lazalu68

    Vanya Huk, и это очень интересно, т.к. JSON.parse не возвращает пустую строку ни при каких обстоятельствах)) Так что либо вы показываете JSON и объясняете термин «пустота», либо я не знаю какой помощи вы ждёте.

    какой JSON файл? вместо какого объекта?
    Решения вопроса 0
    Ответы на вопрос 2
    Помог ответ? В благодарность отметь его решением
    Если вы хотите получить ответ на ваш вопрос, постарайтесь хотя бы понятно его задать.
    Ответ написан более трёх лет назад
    Комментировать
    Нравится 3 Комментировать

    ms-dred

    Вечно что то не то и что то не так.

    Не понятно что именно вам нужно
    1. Если нужно с сервера файл загружать, то на это в jQuery есть api.jquery.com/load
    2. Если нужно получить содержимое переменной во втором файле, то и мудрить нечего

     console.log(hotels)

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

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