Skip to content
Advertisement

How can I change JSON file with javascript

I want to change my JSON file or add an element to my SON file, but real file. I tried this code, but it doesn’t work on the real file. Only the time the tab is open on the web has changed. How to handle it in real file? Not user file, it is server file, but I tried my local.

let xmlreq = new XMLHttpRequest()
xmlreq.open("GET","users.json",true)
 function test(){ 
const obj = JSON.parse(xmlreq.responseText); 
console.log(obj);
obj.user1.name="john";
console.log('obj.user1.name: ', obj.user1.name);

obj.user2.push("item");
console.log('obj.user2.: ', obj.user2);
}

xmlreq.send()

another

    let xmlreq = new XMLHttpRequest()
function test(){ 
// let parsereq= JSON.parse(xmlreq.responseText);
const obj = JSON.parse(xmlreq.responseText); 
console.log(obj);
obj.user1.name="john";
console.log('obj.user1.name: ', obj.user1.name);

obj.user2.push("item");
console.log('obj.user2.: ', obj.user2);
}


xmlreq.open("GET","users.json",true)
xmlreq.send()

Advertisement

Answer

First you have to use the File API to load the file.

https://developer.mozilla.org/en-US/docs/Web/API/File

Then you have to parse the JSON data.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

Then you can do your modifications.

But you can not modify files on your local disc directly. Instead you have to download the file in order to overwrite the original file.

To do so you have to create a data URL from your JSON data.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

And finally you can create a link to download the new JSON.

https://stackoverflow.com/a/15832662/402322

Advertisement