如何使用Javascript将数据写入JSON文件


How to write data to a JSON file using Javascript

例如，我有一个.JSON文件，其中包含以下内容：

1
[{"honda":"accord","color":"red"},{"ford":"focus","color":"black"}]

将另一个对象{"nissan":"sentra","color":"green"}推入这个.JSON数组，使.JSON文件看起来像什么样的javascript代码？

1
[{"honda":"accord","color":"red"},{"ford":"focus","color":"black"},{"nissan":"sentra","color":"green"}]

我之所以问这个问题，是因为我在网上找到了很多关于如何使用Ajax从.json文件中提取数据的信息，但是没有使用Ajax将新数据写入.json文件，而是使用其他数据更新.json文件。

任何帮助都将不胜感激！

相关讨论

你必须清楚你所说的"json"是什么意思。

有些人错误地使用术语json来指代普通的老javascript对象，例如[{a: 1}]。这个恰好是一个数组。如果要向数组中添加一个新元素，只需EDOCX1[1]it，如中所示

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

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

json一词也可用于指以json格式编码的字符串：

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

注意(单)引号，表示这是一个字符串。如果您有这样一个从某个地方获得的字符串，则需要首先使用JSON.parse将其解析为一个javascript对象：

1
var obj = JSON.parse(json);

现在您可以任意操作对象，包括push，如上图所示。如果您想把它放回JSON字符串中，那么可以使用JSON.stringify：

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

JSON还被用作格式化数据的一种常用方法，以便在服务器之间传输数据，并在服务器上保存(持久化)数据。这就是Ajax的切入点。Ajax用于从服务器获取数据(通常为JSON格式)，和/或将JSON格式的数据发送到服务器。如果您收到来自一个JSON格式的Ajax请求的响应，您可能需要像上面描述的那样使用JSON.parse。然后，您可以操作对象，使用JSON.stringify将其放回JSON格式，并使用另一个Ajax调用将数据发送到服务器以进行存储或其他操作。

使用术语"JSON文件"。通常，"文件"一词用于指某个设备上的物理文件(而不是代码中处理的字符串或JavaScript对象)。浏览器无法访问您计算机上的物理文件。它不能读或写它们。实际上，浏览器甚至没有"文件"的概念。因此，您不能只在本地计算机上读或写一些JSON文件。如果您正在向服务器发送JSON，那么当然，服务器可能会将JSON存储为一个文件，但更可能的情况是，服务器将基于从数据库中检索到的数据，或者在某些Ajax请求中解码JSON，然后将相关数据存储回其数据库中，基于某些Ajax请求构建JSON。

你真的有一个"JSON文件"，如果有，它在哪里存在，你从哪里得到的？您是否有一个JSON格式字符串，需要对其进行解析、mainpulate并将其转换为新的JSON格式字符串？您是否需要从服务器获取JSON，并对其进行修改，然后将其发送回服务器？或者您的"json文件"实际上只是一个javascript对象，您只需要使用普通的javascript逻辑进行操作？

可以使用json.stringify将JSON写入本地存储，以序列化JS对象。不能只使用JS写入JSON文件。仅限cookie或本地存储

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

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

稍后检索对象

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

不幸的是，今天(2018年9月)您找不到用于客户端文件写入的跨浏览器解决方案。

For example: in some browser like a Chrome we have today this possibility and we can write with FileSystemFileEntry.createWriter() with client side call, but according to the docu:

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

For IE (but not MS Edge) we could use ActiveX too, but this is only for this client.

如果要跨浏览器更新JSON文件，必须同时使用服务器端和客户端。

客户端脚本

在客户端，您可以向服务器发出请求，然后必须从服务器读取响应。或者你也可以用文件阅读器读取一个文件。对于跨浏览器写入文件，您必须有一些服务器(请参见下面的服务器部分)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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服务器的文章。

通过使用搜索机器，您可以找到"free php web hosting*"或"free node.js web hosting"。对于php服务器，我建议使用000webhost.com，对于node.js，我建议查看并阅读此列表。

PHP服务器端脚本解决方案

用于从JSON文件读取和写入的PHP脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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 web开发：服务器端开发

用于从JSON文件读取和写入的node.js脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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的相关链接：

  • 如何使用pure node.js(http get and post，http server)开发Web应用程序(详细视频教程)
  • HTTP事务的剖析
  • 如何在node.js中处理post请求
  • 如何提取node.js中的post数据？