11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Modifier une fichier json en javascript

Bonjour, tout d'abord je m'excuse, je sais que internet est déjà noyé ce se sujet mais j'ai pas réussi à faire ce que je voulais à partir de ce que j'ai vu sur internet.
J'ai un .json et j'aimerais pour rajouter des elements avec JavaScript.
J'en suis ici :


fetch('db.json')
    .then(response => response.json())
    .then(data => {
        // ici je peux modifier mon array mais les modifications ne sont pas envoyé sur le fichier.
    })


J'espère avoir été clair, sinon n'hésitez pas
Sur ce, bonne journée à tous et merci
Modifié par vzytoi (15 Nov 2020 - 14:50)
Hello,

Il te faudra être beaucoup plus clair sur tes intentions.

Ça veut dire quoi 'les modifications ne sont pas envoyé sur le fichier' ?

Pour envoyer des données, je crois que la méthode HTTP est post via un formulaire. Ici, je vois un "GET", donc tu récupères un fichier, le manipule comme tu veux et c'est tout. Je ne vois pas de "POST" dans ton code.

Mini tuto ici
désolé je connais pas trop les termes mais les modifications de mon tableau que je fais dans mon code n'écrivent pas sur mon fichier .json ...
je vais regarder du côté de ce tuto, merci beaucoup.
Modérateur
Bonjour,

Tu as quoi sur ton serveur ? php ? node.js ? Y-a-t-il déjà des REST-API qui tournent ou bien rien du tout ?

Parce que presque tous les joyeux lurons qui donnent des exemples d'utilisation de fetch() pré-supposent qu'il y a tout ce qu'il faut sur ton serveur pour traiter tes requêtes avec fetch().

Ci-dessous un exemple en utilisant fetch() avec la méthode POST pour enregistrer ton json modifié sur le serveur, et qui fonctionne si tu n'as que php sur ton serveur avec rien d'autre de spécial (en gros, ça fait la même chose que si tu faisais une requête en ajax avec XMLHttpRequest).

1) sur le serveur, on a un fichier "db.json" qui contient :
{"a":1,"b":2,"c":3}


2) sur le serveur, on a le script php "db.php" qui contient :
<?php
file_put_contents('db2.json',$_POST["mydata"]);
?>


3) sur le serveur, on a une page html :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
</style>
</head>
<body>
<h1>Test</h1>
<script>
fetch('db.json')
    .then(response => response.json())
    .then(data => {
    	data.d=4;
    	fetch('db.php', {
        	method: "POST",
        	headers: {"Content-Type":"application/x-www-form-urlencoded"},
        	body: "mydata="+JSON.stringify(data)
      	});
    })
</script>
</body>
</html>

On affiche la page dans un navigateur. Le script javascript qu'elle contient lit le json qui est dans "db.json" (qui lui-même contient la définition d'un objet), ajoute une propriété à l'objet, puis renvoie au serveur le json modifié et exécute le script "db.php" qui stocke la définition de l'objet dans le fichier "db2.json".

Amicalement,
Meilleure solution
C'est super, merci beaucoup !
En effet j'avais du php sur mon server (:
Passe une excellente journée
Sujet clos
Aller à