Как записать данные в файл JSON с помощью Javascript
например, у меня есть .JSON файл, который имеет следующие:
каким будет код javascript для нажатия другого объекта <"nissan": "sentra", "color": "green">в этой .json массив сделать .json файл выглядит как
причина, по которой я спрашиваю, я нахожу много информации в интернете о том, как вытащить данные из a .JSON-файл, использующий AJAX, но не записывающий новые данные .файл json с помощью AJAX для обновления .файл json с дополнительными данными.
любая помощь был бы признателен! Спасибо.
4 ответов
вы должны четко понимать, что вы подразумеваете под «JSON».
некоторые люди неправильно используют термин JSON для обозначения простого старого объекта JavaScript, такого как [
слово 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 строку, которую нужно парсить, mainpulate, и вернуться в новом формате JSON строку? Вам нужно получить JSON от сервер, и изменить его, а затем отправить его обратно на сервер? Или ваш «файл JSON» на самом деле просто объект JavaScript, который вам просто нужно манипулировать с обычной логикой JavaScript?
JSON можно записать в локальное хранилище с помощью JSON.stringify для сериализации объекта JS. Вы не можете писать в файл JSON, используя только JS. Только куки или локальное хранилище
и получить объект позже
быстрый осмотр показывает, что вы пропустили заключительную цитату в
однако, учитывая, что вы ищете, вы можете сделать очень простой массив push следующим образом:
к сожалению, сегодня (сентябрь 2018) вы не можете найти кросс-браузерное решение для записи файлов на стороне клиента.
например: в некоторых браузерах, таких как Chrome, у нас есть эта возможность, и мы можем написать с FileSystemFileEntry.createWriter () с вызовом на стороне клиента, но согласно docu:
эта функция устарела. Хотя это может работать в некоторых браузерах, использование не рекомендуется, так как его можно удалить в любое время. Старайтесь избегать его использования.
Для IE (но не MS Edge) мы могли бы использовать ActiveX тоже, но это только для этого клиента.
если вы хотите обновить кросс-браузер файла JSON, вы должны использовать сервер и клиентскую сторону вместе.
скрипт на стороне клиента
на стороне клиента, вы можете сделать запрос на сервер, а затем вы должны прочитать ответ от сервера. Или вы можете прочитать файл с помощью FileReader тоже. Для кросс-браузерной записи в файл у вас должен быть какой-то сервер (см. ниже на серверной части).
узел.решение сценария на стороне сервера js
Я думаю, что узел.js немного сложен для начинающих. Это не обычный JavaScript, как в браузере. До вы начинаете с узла.js я бы рекомендовал прочитать одну из двух книг:
Формат 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) :
Чтение и запись файлов JSON с помощью Node.js
Один из лучших способов обмена информацией между приложениями, написанными на разных языках, — это использование формата JSON (JavaScript Object Notation). Благодаря единообразию и простоте JSON почти полностью заменил XML в качестве стандартного формата обмена данными в программном обеспечении, особенно в веб-сервисах.
Учитывая широкое использование JSON в программных приложениях, и особенно в приложениях на основе JavaScript, важно знать, как читать и записывать данные JSON в файл в Node.js. В этой статье мы объясним, как выполнять эти функции.
Чтение файла JSON
Давайте сначала посмотрим, как мы можем прочитать уже созданный файл. Но прежде чем мы это сделаем, нам нужно создать файл. Откройте новое окно в вашем любимом текстовом редакторе и добавьте в него следующий текст:
Теперь сохраните этот файл как «student.json» в каталоге вашего проекта.
Чтобы прочитать данные JSON из файла, мы можем использовать модуль Node.js fs. В этом модуле доступны две функции, которые мы можем использовать для чтения файлов из файловой системы: readFile и readFileSync .
Хотя обе эти функции выполняют схожие задачи, например, читают файлы с диска, разница заключается в том, как эти функции выполняются на самом деле, что мы объясним более подробно в следующих разделах.
Использование fs.readFileSync
Функция readFileSync считывает данные из файла. Эта функция блокирует выполнение остальной части кода до тех пор, пока все данные не будут прочитаны из файла. Эта функция особенно полезна, когда вашему приложению необходимо загрузить параметры конфигурации, прежде чем оно сможет выполнять какие-либо другие задачи.
Чтобы продолжить наш пример, давайте воспользуемся этой функцией для чтения файла "student.json", который мы создали ранее, с readFileSync функции readFileSync. Добавьте следующий код в файл .js:
В приведенном выше коде Node.js мы сначала загружаем fs в наше приложение. Затем мы используем readFileSync и передаем ей относительный путь к файлу, который мы хотим прочитать. Если напечатать объект rawdata на консоль, вы увидите исходные данные (в буфере ) на экране консоли:
Однако мы хотим читать файл в его формате JSON, а не необработанные шестнадцатеричные данные. Здесь в JSON.parse вступает функция JSON.parse. Эта функция обрабатывает синтаксический анализ необработанных данных, преобразует их в текст ASCII и анализирует фактические данные JSON в объект JavaScript. Теперь, если вы распечатаете student на консоли, вы получите следующий вывод:
Как видите, JSON из нашего файла был успешно загружен в объект student
Использование fs.readFile
Другой способ чтения файла JSON в Node.js — использование функции readFile В отличие от функции readFileSync readFile считывает данные файла асинхронно. Когда readFile функция readFile, начинается процесс чтения файла, и сразу же управление переходит к следующей строке, выполняющей оставшиеся строки кода. После загрузки данных файла эта функция вызовет предоставленную ей функцию обратного вызова. Таким образом, вы не блокируете выполнение кода, ожидая, пока операционная система вернется к вам с данными.
В нашем примере readFile принимает два параметра: путь к файлу, который должен быть прочитан, и функцию обратного вызова, которая должна быть вызвана, когда файл будет полностью прочитан. При желании вы также можете включить параметр с параметрами, но мы не будем рассматривать их в этой статье.
Взгляните на следующий пример, чтобы понять, как использовать функцию readFile
Приведенный выше код делает то же самое, что и наш предыдущий фрагмент кода (с дополнительным console.log ), но делает это асинхронно. Вот несколько отличий, которые вы, возможно, заметили:
- (err, data) => <> : это наша функция обратного вызова, которая выполняется после полного чтения файла.
- err : Так как мы не можем легко использовать попробовать / поймать с асинхронным кодом, функция вместо дает нам err объект , если что — то пойдет не так. null если ошибок не было
Вы также могли заметить, что мы readFile строку в консоль сразу после вызова readFile. Это сделано для того, чтобы показать вам поведение асинхронного кода. Когда приведенный выше сценарий будет выполнен, вы увидите, что этот console.log выполняется до выполнения readFile обратного вызова readFile. Это связано с тем, что readFile не блокирует выполнение кода при чтении данных из файловой системы.
Вывод кода будет выглядеть так:
Как видите, последняя строка кода в нашем файле на самом деле является той, которая появляется первой в выводе.
Использование require
Другой подход — использовать глобальный require для чтения и анализа файлов JSON. Это тот же метод, который вы используете для загрузки модулей Node, но его также можно использовать для загрузки JSON.
Взгляните на следующий пример.
Он работает точно так же, как readFileSync мы показали выше, но это глобально доступный метод, который вы можете использовать где угодно, что имеет свои преимущества.
Однако у функции require есть несколько недостатков:
- Require — это синхронная функция, которая вызывается только один раз, что означает, что вызовы получают кешированный результат. Если файл обновлен, вы не можете перечитать его с помощью этого метода.
- Ваш файл должен иметь расширение .json, поэтому он не может быть таким гибким. Без правильного расширения require не обрабатывает файл как файл JSON.
Запись JSON в файл
Подобно readFile и readFileSync , есть две функции для записи данных в файлы : writeFile и writeFileSync . Как следует из названий, writeFile записывает данные в файл асинхронным способом, в то время writeFileSync функция writeFileSync записывает данные в файл синхронным образом.
Мы рассмотрим подробнее в следующих разделах.
Использование fs.writeFileSync
Функция writeFileSync принимает 2-3 параметра: путь к файлу для записи данных, данные для записи и необязательный параметр.
Обратите внимание: если файл еще не существует, для вас создается новый файл. Взгляните на следующий пример:
В приведенном выше примере мы сохраняем наш объект JSON student в файл с именем «student-2.json». Обратите внимание, что здесь мы должны использовать JSON.stringify перед сохранением данных. Точно так же, как нам нужно было проанализировать данные в формате JSON, когда мы читаем файл JSON, нам нужно «преобразовать» данные в строку, прежде чем мы сможем сохранить их в строковой форме в файле.
Выполните приведенный выше код и откройте файл student-2.json. Вы должны увидеть в файле следующее содержимое:
Хотя это данные, которые мы хотели записать, они представлены в виде одной строковой строки, которую нам трудно прочитать. Если вы хотите, чтобы сериализованный JSON был удобочитаемым человеком, измените JSON.Stringify следующим образом:
Здесь мы говорим методу добавить новые строки и пару отступов в сериализованный JSON. Теперь, если вы откроете файл "student-2.json", вы должны увидеть текст в следующем формате.
Использование fs.writeFile
Как я уже говорил ранее, writeFile функция выполняется в асинхронном режиме, что означает наш код не блокируется , а данные записываются в файл. И, как и в случае с асинхронными методами ранее, нам нужно передать обратный вызов этой функции.
Давайте напишем еще один файл, student-3.json, с writeFile функции writeFile.
Результатом вышеупомянутого скрипта будет:
И снова вы можете видеть, что последняя строка нашего кода фактически отображается первой в консоли, поскольку наш обратный вызов еще не был вызван. Это приводит к значительной экономии времени выполнения, если у вас есть большие объемы данных для записи в файл или если у вас довольно много файлов для записи.
Учить больше
Хотите узнать больше об основах Node.js? Лично я бы порекомендовал пройти онлайн-курс, например Learn Node.js от Веса Боса <.bos-link>. Вы не только изучите самый современный синтаксис ES2017, но и сможете создать полноценное ресторанное приложение. По моему опыту, создание подобных реальных приложений — самый быстрый способ учиться.
Заключение
В этой статье мы показали, как вы можете читать и записывать данные JSON из файлов и в файлы, что является очень распространенной и важной задачей, которую нужно знать, как веб-программист.
fs есть несколько методов как для чтения, так и для записи в файлы JSON. Функции readFile и readFileSync будут читать данные JSON из файла асинхронно и синхронно соответственно. Вы также можете использовать глобальный require для обработки чтения / анализа данных JSON из файла в одной строке кода. Однако require является синхронным и может читать данные JSON только из файлов с расширением .json.
Точно так же функции writeFile и writeFileSync из fs записывают данные JSON в файл асинхронным и синхронным образом соответственно.