Как записать данные в файл JSON с помощью Javascript

Ответ 1

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

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

var arr = [{a: 1}];
arr.push({b: 2});

< [{a: 1}, {b: 2}]

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

var json = '[{"a": 1}]';

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

var obj = JSON.parse(json);

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

var new_json = JSON.stringify(obj.push({b: 2}));
'[{"a": 1}, {"b": 1}]'

JSON также используется как общий способ форматирования данных для передачи данных на сервер и с сервера, где он может быть сохранен (сохранен). Здесь используется ajax. 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?

Ответ 2

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

    var obj = {"nissan": "sentra", "color": "green"};

localStorage.setItem('myStorage', JSON.stringify(obj));

А для получения объекта позже

var obj = JSON.parse(localStorage.getItem('myStorage'));

Ответ 3

Вы также можете импортировать этот повторно используемый компонент write-json-file, который работает в этом примере:

const writeJsonFile = require('bit/global/write-json-file');
const jsonFile = "/tmp/exampleFile.json";
writeJsonFile(jsonFile,{isThisReal:ture,author:amit}).catch(err => console.log(err));

Код Src:

 const fs = require('fs');
    const vaildateJson = require('bit/global/json-validator');

    const writeToFile = (file,data) => {
      const jsonStr =  (data  instanceof Object) ? JSON.stringify(data,null,4) : data ;
      return vaildateJson(jsonStr)
        .then(jsonStr =>
          new Promise((resolve, reject) => {
            fs.writeFile(`${file}`, jsonStr, 'utf-8', function(err) {
              if (err) reject(err);
              else resolve(jsonStr);
            });
          }))
    }

    module.exports = function writeJsonFile(file, data) {
      return writeToFile(file,data)
    };

Вы также можете использовать этот пакет NPM для задания.

Ответ 4

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

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

Эта функция устарела. Хотя он все еще может работать в некоторых браузерах, его использование не рекомендуется, поскольку его можно удалить в любое время. Старайтесь избегать его использования.

---

Для IE (но не для MS Edge) мы могли бы также использовать ActiveX, но это только для этого клиента.

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

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

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

var xhr = new XMLHttpRequest(),
    jsonArr,
    method = "GET",
    jsonRequestURL = "SOME_PATH/jsonFile/";

xhr.open(method, jsonRequestURL, true);
xhr.onreadystatechange = function()
{
    if(xhr.readyState == 4 && xhr.status == 200)
    {
        // we convert your JSON into JavaScript object
        jsonArr = JSON.parse(xhr.responseText);

        // we add new value:
        jsonArr.push({"nissan": "sentra", "color": "green"});

        // we send with new request the updated JSON file to the server:
        xhr.open("POST", jsonRequestURL, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // if you want to handle the POST response write (in this case you do not need it):
        // xhr.onreadystatechange = function(){ /* handle POST response */ };
        xhr.send("jsonTxt="+JSON.stringify(jsonArr));
        // but on this place you have to have a server for write updated JSON to the file
    }
};
xhr.send(null);

Серверные скрипты

Вы можете использовать много разных серверов, но я хотел бы написать о серверах PHP и Node.js.

С помощью поисковой машины вы можете найти " бесплатный веб-хостинг PHP *" или " бесплатный веб-хостинг Node.js ". Для сервера PHP я бы порекомендовал 000webhost.com, а для Node.js я бы порекомендовал посмотреть и прочитать этот список.

PHP скрипт на стороне сервера

Скрипт PHP для чтения и записи из файла JSON:

<?php

// This PHP script must be in "SOME_PATH/jsonFile/index.php"

$file = 'jsonFile.txt';

if($_SERVER['REQUEST_METHOD'] === 'POST')
// or if(!empty($_POST))
{
    file_put_contents($file, $_POST["jsonTxt"]);
    //may be some error handeling if you want
}
else if($_SERVER['REQUEST_METHOD'] === 'GET')
// or else if(!empty($_GET))
{
    echo file_get_contents($file);
    //may be some error handeling if you want
}
?>

Node.js серверное решение сценария

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

• Учебный узел: переход на серверную часть
• Node.js Веб-разработка: разработка на стороне сервера

Скрипт Node.js для чтения и записи из файла JSON:

var http = require("http"),
    fs = require("fs"),
    port = 8080,
    pathToJSONFile = '/SOME_PATH/jsonFile.txt';

http.createServer(function(request, response)
{
    if(request.method == 'GET')
    {
        response.writeHead(200, {"Content-Type": "application/json"});
        response.write(fs.readFile(pathToJSONFile, 'utf8'));
        response.end();
    }
    else if(request.method == 'POST')
    {
        var body = [];

        request.on('data', function(chunk)
        {
            body.push(chunk);
        });

        request.on('end', function()
        {
            body = Buffer.concat(body).toString();
            var myJSONdata = body.split("=")[1];
            fs.writeFileSync(pathToJSONFile, myJSONdata); //default: 'utf8'
        });
    }
}).listen(port);

Ссылки по теме для Node.js:

• Как разработать веб-приложение с использованием чистого Node.js(HTTP GET и POST, HTTP Server) (подробное видеоурок)
• Анатомия HTTP-транзакции
• Как обработать POST-запрос в Node.js
• Как вы извлекаете данные POST в Node.js?