So schreiben Sie Daten mit Javascript in eine JSON-Datei

Ich habe zum Beispiel eine .JSON Datei mit folgendem Inhalt:

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

Was wäre der Javascript-Code, um ein anderes Objekt zu verschieben {"nissan": "sentra", "color": "green"} das mögen .json Array zu machen .json Datei aussehen

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

Der Grund, warum ich frage, ist, dass ich online viele Informationen darüber finde, wie man Daten aus einer .json-Datei mit AJAX zieht, aber keine neuen Daten mit AJAX in die .json-Datei schreibt, um die .json-Datei mit zusätzlichen Daten zu aktualisieren.

Jede Hilfe wäre willkommen!

Sie müssen sich darüber im Klaren sein, was Sie mit “JSON” meinen.

Einige Leute verwenden den Begriff JSON fälschlicherweise, um sich auf ein einfaches altes JavaScript-Objekt zu beziehen, wie z [{a: 1}]. Dies ist zufällig ein Array. Wenn Sie dem Array ein neues Element hinzufügen möchten, einfach push es, wie in

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

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

Das Wort JSON kann auch verwendet werden, um auf eine Zeichenfolge zu verweisen, die im JSON-Format codiert ist:

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

Beachten Sie die (einfachen) Anführungszeichen, die darauf hinweisen, dass es sich um eine Zeichenfolge handelt. Wenn Sie eine solche Zeichenfolge haben, die Sie irgendwoher erhalten haben, müssen Sie sie zuerst in ein JavaScript-Objekt parsen, indem Sie verwenden JSON.parse:

var obj = JSON.parse(json);

Jetzt können Sie das Objekt beliebig manipulieren, einschließlich push wie oben gezeigt. Wenn Sie es dann wieder in einen JSON-String stecken möchten, verwenden Sie JSON.stringify:

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

JSON wird auch als gängige Methode zum Formatieren von Daten für die Übertragung von Daten zu und von einem Server verwendet, wo sie gespeichert (persistent) werden können. Hier kommt Ajax ins Spiel. Ajax wird verwendet, um Daten, häufig im JSON-Format, von einem Server zu erhalten und/oder Daten im JSON-Format an den Server zu senden. Wenn Sie eine Antwort von einer Ajax-Anforderung im JSON-Format erhalten haben, müssen Sie dies möglicherweise tun JSON.parse es wie oben beschrieben. Dann können Sie das Objekt manipulieren, es wieder in das JSON-Format bringen mit JSON.stringifyund verwenden Sie einen weiteren Ajax-Aufruf, um die Daten zur Speicherung oder anderen Manipulation an den Server zu senden.

Sie verwenden den Begriff „JSON-Datei“. Normalerweise bezieht sich das Wort “Datei” auf eine physische Datei auf einem Gerät (nicht ein String, mit dem Sie es in Ihrem Code zu tun haben, oder ein JavaScript-Objekt). Der Browser hat keinen Zugriff auf physische Dateien auf Ihrem Computer. Es kann sie weder lesen noch schreiben. Eigentlich hat der Browser nicht einmal wirklich den Begriff einer “Datei”. Daher können Sie nicht einfach eine JSON-Datei auf Ihrem lokalen Computer lesen oder schreiben. Wenn Sie JSON zu und von einem Server senden, speichert der Server den JSON natürlich möglicherweise als Datei, aber wahrscheinlicher erstellt der Server den JSON auf der Grundlage einer Ajax-Anfrage, basierend auf Daten, die er aus einer Datenbank abruft , oder das Decodieren des JSON in einer Ajax-Anforderung und das anschließende Speichern der relevanten Daten wieder in seiner Datenbank.

Haben Sie wirklich eine “JSON-Datei”, und wenn ja, wo existiert diese und woher haben Sie sie? Haben Sie eine Zeichenfolge im JSON-Format, die Sie parsen, pflegen und wieder in eine neue Zeichenfolge im JSON-Format umwandeln müssen? Müssen Sie JSON vom Server abrufen, ändern und dann an den Server zurücksenden? Oder ist Ihre “JSON-Datei” eigentlich nur ein JavaScript-Objekt, das Sie einfach mit normaler JavaScript-Logik manipulieren müssen?

JSON kann mithilfe von JSON.stringify in den lokalen Speicher geschrieben werden, um ein JS-Objekt zu serialisieren. Sie können nicht nur mit JS in eine JSON-Datei schreiben. Nur Cookies oder lokale Speicherung

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

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

Und um das Objekt später wiederzufinden

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

Leider können Sie heute (September 2018) keine browserübergreifende Lösung für das clientseitige Schreiben von Dateien finden.

Zum Beispiel: in einigen Browsern wie Chrome, die wir haben heute diese Möglichkeit und wir können mit schreiben FileSystemFileEntry.createWriter() mit clientseitigem Aufruf, aber laut Doku:

Diese Funktion ist veraltet. Obwohl es in einigen Browsern möglicherweise noch funktioniert, wird von seiner Verwendung abgeraten, da es jederzeit entfernt werden kann. Versuchen Sie es zu vermeiden.

---

Für IE (aber nicht MS Edge) könnten wir auch ActiveX verwenden, aber das gilt nur für diesen Client.

Wenn Sie Ihre JSON-Datei browserübergreifend aktualisieren möchten, müssen Sie Server- und Clientseite zusammen verwenden.

Das clientseitige Skript

Auf der Clientseite können Sie eine Anfrage an den Server stellen und müssen dann die Antwort vom Server lesen. Oder Sie könnten eine Datei mit lesen FileReader zu. Für das browserübergreifende Schreiben in die Datei müssen Sie einen Server haben (siehe unten zum Serverteil).

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);

Serverseitige Skripte

Sie können viele verschiedene Server verwenden, aber ich möchte über PHP- und Node.js-Server schreiben.

Wenn Sie eine Suchmaschine verwenden, finden Sie “kostenloses PHP-Webhosting*” oder “kostenloses Node.js-Webhosting“. Für PHP-Server würde ich empfehlen 000webhost.com und für Node.js würde ich empfehlen zu sehen und zu lesen diese Liste.

PHP serverseitige Skriptlösung

Das PHP-Skript zum Lesen und Schreiben aus der JSON-Datei:

<?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 serverseitige Skriptlösung

Ich denke, dass Node.js für Anfänger etwas komplex ist. Dies ist kein normales JavaScript wie im Browser. Bevor Sie mit Node.js beginnen, würde ich empfehlen, eines von zwei Büchern zu lesen:

• Lernknoten: Wechsel zur Serverseite
• Node.js-Webentwicklung: Serverseitige Entwicklung

Das Node.js-Skript zum Lesen und Schreiben aus der JSON-Datei:

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);

Weiterführende Links für Node.js:

• So entwickeln Sie eine Webanwendung mit reinem Node.js (HTTP GET und POST, HTTP-Server) (detailliertes Video-Tutorial)
• Anatomie einer HTTP-Transaktion
• Umgang mit POST-Anforderungen in Node.js
• Wie extrahieren Sie POST-Daten in Node.js?