web-dev-qa-db-ja.com

Javascriptを使用してJSONファイルにデータを書き込む方法

たとえば、次のような.JSONファイルがあります。

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

別のオブジェクト{"nissan": "sentra", "color": "green"}をこの.json配列にプッシュして.jsonファイルを次のように見せるためのJavaScriptコードは何ですか

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

私が尋ねる理由は、AJAXを使用して.jsonファイルからデータをプルする方法に関する多くの情報をオンラインで見つけているが、AJAXを使用して.jsonファイルに新しいデータを書き込まないことです_追加データで.jsonファイルを更新します。

助けていただければ幸いです！

javascriptjsonajaxobject
28
asiacares64

「JSON」の意味を明確にする必要があります。

一部の人々は、[{a: 1}]などの単純な古いJavaScriptオブジェクトを指すためにJSONという用語を誤って使用します。これはたまたま配列です。配列に新しい要素を追加する場合は、Pushそれだけで、

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

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

Word JSONは、JSON形式でエンコードされた文字列を参照するためにも使用できます。

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

これが文字列であることを示す（単一の）引用符に注意してください。どこかから取得した文字列がある場合は、最初にJSON.parseを使用してJavaScriptオブジェクトに解析する必要があります。

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形式でサーバーにデータを送信するために使用されます。 JSON形式のajaxリクエストから応答を受け取った場合、上記のようにJSON.parseする必要があります。次に、オブジェクトを操作し、JSON.stringifyを使用してJSON形式に戻し、別のajax呼び出しを使用して、ストレージまたはその他の操作のためにデータをサーバーに送信します。

用語「JSONファイル」を使用します。通常、Wordの「ファイル」は、一部のデバイス上の物理ファイルを参照するために使用されます（notコードで処理している文字列、またはJavaScriptオブジェクト）。ブラウザは、マシン上の物理ファイルにアクセスできません。それらを読み書きすることはできません。実際、ブラウザには「ファイル」という概念さえありません。したがって、ローカルマシンでJSONファイルを読み書きすることはできません。サーバーとの間でJSONを送受信している場合、もちろんサーバーはJSONをファイルとして保存している可能性がありますが、サーバーは、データベースから取得したデータに基づいてajaxリクエストに基づいてJSONを構築している可能性が高いです、またはajaxリクエストでJSONをデコードしてから、関連するデータをデータベースに保存します。

「JSONファイル」は本当にありますか？もしあれば、どこに存在し、どこから入手したのですか？ JSON形式の文字列があり、それを解析して保守し、新しいJSON形式の文字列に戻す必要がありますか？サーバーからJSONを取得し、変更してからサーバーに送り返す必要がありますか？または、「JSONファイル」は実際には単なるJavaScriptオブジェクトであり、通常のJavaScriptロジックで操作する必要があるだけですか？

23
user663031

JSONはJSON.stringifyを使用してJSオブジェクトをシリアル化してローカルストレージに書き込むことができます。 JSのみを使用してJSONファイルに書き込むことはできません。 Cookieまたはローカルストレージのみ

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

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

後でオブジェクトを取得するには

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

残念ながら、今日（2018年9月）、クライアント側のファイル書き込み用のクロスブラウザーソリューションは見つかりません。

例： Chromeのようなブラウザではtodayこの可能性があり、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サーバーについて書きたいと思います。

検索マシンを使用すると、「 free PHP Web Hosting *」または「 free Node.js Web Hosting 」を見つけることができます。 PHPサーバーには 0webhost.com をお勧めします。Node.jsには このリスト を参照して読むことをお勧めします。

PHPサーバー側スクリプトソリューション

JSONファイルの読み取りおよび書き込み用のPHPスクリプト：

<?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を始める前に、2冊の本から1冊を読むことをお勧めします。

JSONファイルの読み取りおよび書き込み用のNode.jsスクリプト：

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の関連リンク：

1
Bharata