Как сохранить json в файл js

Обновлено: 05.07.2024

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

Необходимые знания:	Базовая компьютерная грамотность, базовые знания HTML и CSS, знакомство с основами JavaScript (см. First steps и Building blocks) и основами OOJS (see Introduction to objects).
Цель:	Понять, как работать с данными, хранящимися в 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

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

Здесь мы сохраняем ответ на наш запрос (доступный в свойстве 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, используя:

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

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

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

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

Резюме

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

Мнение о том, что JavaScript не умеет взаимодействовать с файловой системой, является не совсем верным. Скорее, речь идет о том, что это взаимодействие существенно ограничено по сравнению с серверными языками программирования, такими как Node.js или PHP. Тем не менее, JavaScript умеет как получать (принимать), так и создавать некоторые типы файлов и успешно обрабатывать их нативными средствами.

В этой статье мы создадим три небольших проекта:

Реализуем получение и обработку изображений, аудио, видео и текста в формате txt и pdf
Создадим генератор JSON-файлов
Напишем две программы: одна будет формировать вопросы (в формате JSON), а другая использовать их для создания теста

Получаем и обрабатываем файлы

Для начала создадим директорию, в которой будут храниться наши проекты. Назовем ее «Work-With-Files-in-JavaScript» или как Вам будет угодно.

В этой директории создадим папку для первого проекта. Назовем ее «File-Reader».

Создаем в ней файл «index.html» следующего содержания:

Здесь мы имеем контейнер-файлоприемник и инпут с типом «file» (для получения файла; мы будем работать с одиночными файлами; для получения нескольких файлов инпуту следует добавить атрибут «multiple»), который будет спрятан под контейнером.

Стили можно подключить отдельным файлом или в теге «style» внутри head:

Можете сделать дизайн по своему вкусу.

Не забываем подключить скрипт либо в head с атрибутом «defer» (нам нужно дождаться отрисовки (рендеринга) DOM; можно, конечно, сделать это в скрипте через обработку события «load» или «DOMContentLoaded» объекта «window», но defer намного короче), либо перед закрывающим тегом «body» (тогда не нужен ни атрибут, ни обработчик). Лично я предпочитаю первый вариант.

Откроем index.html в браузере:

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

Нам часто придется обращаться к объектам «document» и «document.body», а также несколько раз выводить результаты в консоль, поэтому предлагаю обернуть наш код в такое IIFE (это не обязательно):

Первым делом объявляем переменные для файлоприемника, инпута и файла (последний не инициализируем, поскольку его значение зависит от способа передачи — через клик по инпуту или бросание (drop) в файлоприемник):

Отключаем обработку событий «dragover» и «drop» браузером:

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

Обрабатываем бросание файла в файлоприемник:

Мы только что реализовали простейший механизм «dran'n'drop».

Обрабатываем клик по файлоприемнику (делегируем клик инпуту):

Приступаем к обработке файла:

Удаляем файлоприемник и инпут:

Способ обработки файла зависит от его типа:

Мы не будем работать с html, css и js-файлами, поэтому запрещаем их обработку:

Мы также не будем работать с MS-файлами (имеющими MIME-тип «application/msword», «application/vnd.ms-excel» и т.д.), поскольку их невозможно обработать нативными средствами. Все способы обработки таких файлов, предлагаемые на StackOverflow и других ресурсах, сводятся либо к конвертации в другие форматы с помощью различных библиотек, либо к использованию viewer'ов от Google и Microsoft, которые не хотят работать с файловой системой и localhost. Вместе с тем, тип pdf-файлов также начинается с «application», поэтому такие файлы мы будем обрабатывать отдельно:

Для остальных файлов получаем их «групповой» тип:

Посредством switch..case определяем конкретную функцию обработки файла:

например, у меня есть .JSON файл, который имеет следующие:

каким будет код javascript для нажатия другого объекта в этой .json массив сделать .json файл выглядит как

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

любая помощь был бы признателен! Спасибо.

вы должны четко понимать, что вы подразумеваете под "JSON".

некоторые люди неправильно используют термин JSON для обозначения простого старого объекта JavaScript, такого как [] . Этот массив. Если вы хотите добавить новый элемент в массив, просто push , как в

слово JSON также может использоваться для обозначения строки, которая закодирована в формате JSON:

обратите внимание на (одиночные) кавычки, указывающие, что это строка. Если у вас есть такая строка, которую вы получили откуда-то, вам нужно сначала разобрать ее на объект JavaScript, используя JSON.parse :

теперь вы можете манипулировать объектом любым способом, включая push как показано выше. Если вы хотите вернуть его в строку JSON, то вы используете JSON.stringify :

JSON также используется как обычный способ форматирования данных для передачи данных на сервер и с сервера, где они могут быть сохранены (сохранены). Это где "Аякс" войти. Ajax используется как для получения данных, часто в формате JSON, с сервера, и / или для отправки данных в формате JSON до сервера. Если вы получили ответ от ajax-запроса в формате JSON, вам может потребоваться JSON.parse его, как описано выше. Затем вы можете управлять объектом, вернуть его в формат JSON с помощью JSON.stringify и используйте другой вызов ajax для отправки данных на сервер для хранения или других манипуляций.

вы используете термин "файл JSON". Обычно слово "файл" используется для обозначения физического файла устройства (не строка, с которой Вы имеете дело в своем коде, или объект JavaScript). Браузер не имеет доступа к физическим файлам на вашем компьютере. Он не может ни читать, ни писать их. На самом деле, браузер даже не имеет понятия "файл". Таким образом, вы не можете просто прочитать или записать файл JSON на локальном компьютере. Если вы отправляете JSON на сервер и с сервера, то, конечно, сервер может хранить JSON как файл, но более вероятно, что сервер будет строить JSON на основе некоторого запроса ajax, основываясь на данных, которые он извлекает из базы данных, или декодировать JSON в некотором запросе ajax, а затем хранить соответствующие данные обратно в свою базу данных.

JSON можно записать в локальное хранилище с помощью JSON.stringify для сериализации объекта JS. Вы не можете писать в файл JSON, используя только JS. Только куки или локальное хранилище

и получить объект позже

быстрый осмотр показывает, что вы пропустили заключительную цитату в

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

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

например: в некоторых браузерах, таких как Chrome, у нас есть эта возможность, и мы можем написать с FileSystemFileEntry.createWriter () с вызовом на стороне клиента, но согласно docu:

эта функция устарела. Хотя это может работать в некоторых браузерах, использование не рекомендуется, так как его можно удалить в любое время. Старайтесь избегать его использования.
Для IE (но не MS Edge) мы могли бы использовать ActiveX тоже, но это только для этого клиента.

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

скрипт на стороне клиента

на стороне клиента, вы можете сделать запрос на сервер, а затем вы должны прочитать ответ от сервера. Или вы можете прочитать файл с помощью FileReader тоже. Для кросс-браузерной записи в файл у вас должен быть какой-то сервер (см. ниже на серверной части).

узел.решение сценария на стороне сервера js

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

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

Как это будет работать

Мы возьмём код из прошлого проекта про отправку JSON на сервер и добавим в него новые возможности.

Логика будет такая:

Мы научим сервер каждый раз запоминать данные, которые отправит ему наша страница. Чтобы убедиться, что данные в порядке, мы сразу же в ответ будем посылать результат — то, как сервер это запомнил.
После этого мы поработаем с данными от сервера в понятном для JavaScript виде. Для этого мы немного их поменяем и отправим обратно на сохранение. Это поможет нам понять, как работать с данными в других проектах.

👉 Мы специально используем самые простые и не самые лучшие конструкции в PHP и JavaScript. Наша цель — собрать быстрый прототип и показать, как можно обмениваться данными с сервером. Когда разберёмся с этим, можно и код пооптимизировать. А пока так.

Сохраняем JSON в файл на сервере

Сейчас работает так — по нажатию на кнопку «Проверить JSON» наша страница отправляет на сервер JSON-строку с двумя ключами: именем и фамилией. Новая задача сервера — сохранять себе все полученные данные и отправлять их обратно на страницу. Чтобы данные не потерялись после окончания работы программы, будем сохранять их на сервере в файл json.data . Мы выбрали такое название, но вы можете взять любое другое, имя файла ни на что не влияет.

Так как по нажатию этой кнопки страница обращается на сервере к файлу json.php, то и изменять тоже нужно именно его. Сделаем так:

Получаем данные от страницы (это уже сделано в прошлом проекте).
Проверяем, есть ли на сервере нужный нам файл с данными — json.data.
Если есть — запоминаем его содержимое, а если такого файла нет — создаём его отдельной командой.
Всё, что было в этом файле, переводим в массив, с которым умеет работать PHP. Таким способом у нас каждая JSON-запись будет храниться в отдельной ячейке массива.
Добавляем новую запись в этот массив — кладём в него то, что пришло со страницы.
Записываем это всё обратно в файл и тут же читаем обратно из него — так мы убедимся, что запись прошла нормально и мы можем с этим работать.
Отправляем всё содержимое файла на страницу, чтобы там увидеть, что сервер работает как нужно.

Задача этого алгоритма — сохранять данные на сервере и отдавать их обратно на страницу. На языке PHP то же самое будет выглядеть так:

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

Подготавливаем страницу

Теперь научим нашу страницу правильно обрабатывать ответ от сервера и работать с полученными данными. Для этого нам нужно:

Перед тем как работать с полученными данными в JavaScript, нам нужно их куда-то сохранить. Для этого в самом начале скрипта заведём новую переменную res , и добавим в функцию sendJSON() такую строку:

// запоминаем данные, которые пришли с сервера

// выводим то, что ответил нам сервер —
так мы убедимся, что данные он получил правильно

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

Чтобы мы могли отдельно управлять всеми изменениями, добавим в наш HTML-файл с прошлого проекта новую кнопку рядом с первой:

<!-- эта кнопка поменяет полученные данные
и отправит их снова на сервер --!>

Сделаем функцию editJSON(), которая сработает по нажатию на эту кнопку. Работать она будет так:

Возьмёт сырые данные от сервера и преобразует их в формат, понятный для JavaScript.
Найдёт все имена, посчитает количество символов в них и допишет это число к имени. Так мы поймём, что данные можно менять как нам нужно.
Преобразует всё это обратно в JSON и отправит на сервер.
На всякий случай снова выведет результат на странице, чтобы мы убедились, что на сервере лежат уже новые данные.

Чтобы не писать код заново, мы скопируем уже существующую функцию sendJSON(), переименуем её в editJSON() и добавим в неё то, что нам нужно. А перед этим в самом начале скрипта снова добавим две новые переменные:

newData , где мы будем хранить данные в понятном формате;
sendData , куда мы поместим новую JSON-строку перед отправкой на сервер.

Что мы делаем с JSON, полученным с сервера

Перед тем как показать финальный код, поясним один момент. Мы переводим данные с сервера в формат для JavaScript командой

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

Дело тут вот в чём: первая цифра в квадратных скобках отвечает за порядковый номер JSON-записи, которые мы отправляли на сервер. Нумерация идёт с нуля, как принято у программистов.

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

После этого через точку идёт имя поля — у нас это name и lastname. Через них мы можем обращаться к конкретным значениям и менять в них что угодно.

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

Сам код новой функции:

Делаем новый PHP-обработчик на сервере

В скрипте мы обращались к файлу edit.php, которого у нас ещё нет. Всё, что нужно от этого файла, — чтобы он сохранил то, что ему пришло, и тут же отправил это обратно, чтобы мы убедились, что всё хорошо. Мы специально выносим такую простую функцию в отдельный файл, чтобы каждый из них отвечал за свою область работы.

Сам файл довольно прост:

Что дальше

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

Читайте также: