How to update JSON file on server using JavaScript

Question

How to update JSON file on server using JavaScript

I am encountering an issue that has been discussed quite frequently. Despite trying various solutions, none have proven effective so far.

The problem lies in my JavaScript file where I have some data that I need to append to an existing .json file on my server. Although I attempted the following approach, whenever I check the .json file after calling ajax_get_json(), the new data is not added.

function ajax_get_json(){
var hr = new XMLHttpRequest();
hr.open('POST', 'myyjson.json', true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var us = document.getElementById("firstname").value;
var msg= document.getElementById("message").value;
hr.onreadystatechange = function(){
    if (hr.readyState == 4 && hr.status == 200){
        var obj = JSON.parse(hr.responseText);
        obj['participant'].push({"user": us, "message": msg});
        var sendingObj = JSON.stringify(obj);
    }
}
hr.send(sendingObj);

}

The structure of myjson.json file is as follows:

{ "participant":[
{"user":"Steven", "message":"Hey, I'm in!"},
{"user":"Tim", "message":"I wrote something."},
{"user":"Lukas", "message":"example"}
]}

Can anyone provide insight into what might be causing the issue or suggest a better approach?

Thank you in advance!

javascript ajax json

Answer 1

Answer №1

When it comes to writing JSON on the server side using JavaScript on the client, it's crucial to consider security implications. It's not advisable to directly write JSON on the server from the client side as this can pose a security risk. The recommended approach is to use server-side languages like PHP, Java, or JavaScript to handle JSON writing operations. You can then trigger these server functions from the client side using techniques like AJAX.

On the client side, you can initiate a request by accessing a specific URL such as
```
www.yourserver.com/writejson.php?u=steven&m=Hi
```
.
The server will intercept this request and proceed to write the data to a JSON file. In this case, the username is steven and the message is Hi.

It's important to clarify a misconception regarding the XMLHttpRequest.send method. This method is not used for sending data to be saved on the server; rather, it triggers the XMLHttpRequest. Here's a breakdown of how your code executes:

function ajax_get_json(){
var hr = new XMLHttpRequest(); // 1.
hr.open('POST', 'myyjson.json', true); // 2.
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 3.
var us = document.getElementById("firstname").value; // 4.
var msg = document.getElementById("message").value; // 5.
hr.onreadystatechange = function(){ // 6.
    if (hr.readyState == 4 && hr.status == 200){ // 8. This callback is triggered when the XMLHttpRequest state changes
    var obj = JSON.parse(hr.responseText); // 9. Parse the response once it's complete
    obj['participant'].push({"user": us, "message": msg}); // 10. Modify the object with user input
    var sendingObj = JSON.stringify(obj); // 11. Convert the updated object to JSON
    }
}
hr.send(sendingObj); // 7. Note that sendingObj should be defined before being sent

Answer 2

When it comes to writing JSON on the server side using JavaScript on the client, it's crucial to consider security implications. It's not advisable to directly write JSON on the server from the client side as this can pose a security risk. The recommended approach is to use server-side languages like PHP, Java, or JavaScript to handle JSON writing operations. You can then trigger these server functions from the client side using techniques like AJAX.

On the client side, you can initiate a request by accessing a specific URL such as
```
www.yourserver.com/writejson.php?u=steven&m=Hi
```
.
The server will intercept this request and proceed to write the data to a JSON file. In this case, the username is steven and the message is Hi.

It's important to clarify a misconception regarding the XMLHttpRequest.send method. This method is not used for sending data to be saved on the server; rather, it triggers the XMLHttpRequest. Here's a breakdown of how your code executes:

function ajax_get_json(){
var hr = new XMLHttpRequest(); // 1.
hr.open('POST', 'myyjson.json', true); // 2.
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 3.
var us = document.getElementById("firstname").value; // 4.
var msg = document.getElementById("message").value; // 5.
hr.onreadystatechange = function(){ // 6.
    if (hr.readyState == 4 && hr.status == 200){ // 8. This callback is triggered when the XMLHttpRequest state changes
    var obj = JSON.parse(hr.responseText); // 9. Parse the response once it's complete
    obj['participant'].push({"user": us, "message": msg}); // 10. Modify the object with user input
    var sendingObj = JSON.stringify(obj); // 11. Convert the updated object to JSON
    }
}
hr.send(sendingObj); // 7. Note that sendingObj should be defined before being sent

How to update JSON file on server using JavaScript

Answer №1

Similar questions

Parsing JSON in Node.js: Adding the Key-Value Pair at the Beginning of the JSON

Integrate JavaScript code with HTML pages

Prevent additional clicks on the image

Utilizing the require function to implement an AngularJS Controller without having

Encountered an npm ERR while executing the React project

Basic Django button for triggering view function

Is it possible to exclude specific URLs from CSRF protection in sails.js?

Issue with Spring JPA: Foreign keys missing from response

Modify the displayed text according to the content of the input field in HTML

Unable to utilize the post method in Node.js

embedding a button alongside the pager in an HTML document

Creating a worldwide entity through the use of an Immediately Invoked Function Expression

The onchange function in JavaScript is malfunctioning

Attempting to alert a particular device using Flutter for notification delivery

Button to scroll down

Creating dynamic components in Vue.js using VueJS and jQuery synergistically

What is the best way to transfer variables between PHP and an external JavaScript file?

How can JavaScript be used to make an AJAX request to a server-side function?

Retrieve content from Wordpress blog including image preview

Implementing a dynamic like functionality using Ajax in Django