web-dev-qa-db-fra.com

Comment écrire des données dans un fichier JSON en utilisant Javascript

Par exemple, j'ai un .JSON fichier qui a les éléments suivants:

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

Quel serait le code javascript pour pousser un autre objet {"nissan": "sentra", "color": "green"} dans ce .json tableau pour faire le .json fichier ressemble

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

La raison pour laquelle je pose cette question est que je trouve beaucoup d'informations en ligne sur la façon d'extraire des données d'un fichier .json à l'aide de AJAX mais sans écrire de nouvelles données dans le fichier .json à l'aide de AJAX pour mettre à jour le fichier .json avec des données supplémentaires.

Toute aide serait appréciée!

javascriptjsonajaxobject
28
asiacares64

Vous devez être clair sur ce que vous entendez par "JSON".

Certaines personnes utilisent le terme JSON de manière incorrecte pour faire référence à un ancien objet JavaScript tel que [{a: 1}]. Celui-ci se trouve être un tableau. Si vous voulez ajouter un nouvel élément au tableau, simplement Push it, comme dans

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

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

Word JSON peut également être utilisé pour faire référence à une chaîne encodée au format JSON:

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

Notez les guillemets (uniques) indiquant qu'il s'agit d'une chaîne. Si vous avez obtenu une telle chaîne quelque part, vous devez d’abord l’analyser dans un objet JavaScript, en utilisant JSON.parse:

var obj = JSON.parse(json);

Vous pouvez maintenant manipuler l'objet comme vous le souhaitez, y compris Push comme indiqué ci-dessus. Si vous voulez ensuite le remettre dans une chaîne JSON, utilisez JSON.stringify:

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

JSON est également utilisé comme un moyen courant de formater des données pour la transmission de données vers et depuis un serveur, où elles peuvent être enregistrées (persistées). C'est ici qu'intervient ajax. Ajax est utilisé à la fois pour obtenir des données, souvent au format JSON, d'un serveur et/ou pour envoyer des données au format JSON jusqu'au serveur. Si vous avez reçu une réponse d'une requête ajax au format JSON, vous devrez peut-être JSON.parse comme décrit ci-dessus. Ensuite, vous pouvez manipuler l'objet, le remettre au format JSON avec JSON.stringify, et utilisez un autre appel ajax pour envoyer les données au serveur en vue de leur stockage ou de toute autre manipulation.

Vous utilisez le terme "fichier JSON". Normalement, le mot "fichier" est utilisé pour faire référence à un fichier physique sur un périphérique (pas une chaîne que vous utilisez dans votre code ou un objet JavaScript). Le navigateur n'a pas accès aux fichiers physiques sur votre ordinateur. Il ne peut ni lire ni écrire. En réalité, le navigateur n'a même pas vraiment la notion de "fichier". Ainsi, vous ne pouvez pas simplement lire ou écrire un fichier JSON sur votre ordinateur local. Si vous envoyez du JSON vers et depuis un serveur, le serveur stocke peut-être le fichier JSON sous forme de fichier, mais il est plus probable qu'il construira le fichier JSON en fonction d'une requête ajax, en fonction des données extraites d'une base de données. , ou décodez le JSON dans une requête ajax, puis enregistrez les données pertinentes dans sa base de données.

Avez-vous vraiment un "fichier JSON", et si oui, où existe-t-il et où l'avez-vous obtenu? Avez-vous une chaîne au format JSON, que vous devez analyser, conserver, puis reconvertir en une nouvelle chaîne au format JSON? Avez-vous besoin d’obtenir JSON du serveur, de le modifier et de le renvoyer ensuite au serveur? Ou bien votre "fichier JSON" est-il en réalité un objet JavaScript, que vous devez simplement manipuler avec une logique JavaScript normale?

23
user663031

JSON peut être écrit dans un stockage local à l'aide de JSON.stringify pour sérialiser un objet JS. Vous ne pouvez pas écrire dans un fichier JSON en utilisant uniquement JS. Seuls les cookies ou le stockage local

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

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

Et pour récupérer l'objet plus tard

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

Malheureusement, aujourd'hui (septembre 2018), vous ne pouvez pas trouver de solution multi-navigateur pour l'écriture de fichiers côté client.

Par exemple: dans certains navigateurs tels que Chrome, nous avons aujourd'hui cette possibilité et nous pouvons écrire avec FileSystemFileEntry.createWriter () avec un appel côté client, mais selon le docu:

Cette fonctionnalité est obsolète. Bien que certains navigateurs puissent continuer à fonctionner, son utilisation est déconseillée car elle pourrait être supprimée à tout moment. Essayez d'éviter de l'utiliser.

Pour IE (mais pas MS Edge), nous pourrions aussi utiliser ActiveX, mais cela ne concerne que ce client.

Si vous souhaitez mettre à jour votre navigateur JSON, vous devez utiliser simultanément le serveur et le client.

Le script côté client

Du côté du client, vous pouvez faire une demande au serveur et vous devez ensuite lire la réponse du serveur. Ou vous pouvez aussi lire un fichier avec FileReader. Pour l'écriture multi-navigateur dans le fichier, vous devez disposer d'un serveur (voir ci-dessous la partie serveur).

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

Scripts côté serveur

Vous pouvez utiliser beaucoup de serveurs différents, mais j'aimerais parler des serveurs PHP et Node.js.

En utilisant la machine de recherche, vous pouvez trouver " gratuit PHP Hébergement Web *" ou " gratuit Node.js Hébergement Web ". Pour PHP serveur, je recommanderais 000webhost.com et pour Node.js, je recommanderais de voir et de lire cette liste .

Solution de script côté serveur PHP

Le script PHP pour lire et écrire à partir d'un fichier 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
}
?>

Solution de script côté serveur Node.js

Je pense que Node.js est un peu complexe pour débutant. Ce n'est pas normal JavaScript comme dans le navigateur. Avant de commencer avec Node.js, je vous recommande de lire l'un de deux livres:

Le script Node.js pour lire et écrire à partir d'un fichier 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);

Liens associés à Node.js:

1
Bharata