What could be causing my POST request to fail in creating a new JSON file using JavaScript?

I'm troubleshooting why my post request isn't generating a new JSON file. I've implemented a JS POST fetch request in the code snippet below.

//All variables are assumed to be defined
fetch(lowercaseUsernameStr+'_profile_data.json', {
 method: 'POST',
 headers: {
  'Content-Type': 'application/json',
 },
 body: {
  "publicData": {
    "username": usernameStr,
    "userDescription": userDescription,
    "favoriteGameData": {
     "favoriteGameCategory": favoriteGameCategoryStr,
     "favoriteGameNum": favoriteGameNum
    },
    "stats": {
     "level": 1,
     "levelXP": 0,
     "maxLevelXP": 100,
     "XPUntilNextLevel": 100,
     "totalXP": 0,
     "trophies": 0
    }
  },
  "privateData": {
   "password": passwordStr,
   "email": email,
   "telNum": telNum,
   "userProfilePageVisibilityYesOrNo":
   optionsSelectedOptionStr,
   "userProfilePictureSrc": userProfilePictureSrc
   }
  }
})
.catch((error)=>{
 alert("Sorry! We could not create your account! Please report the problem and wait until it's fixed! Here is the error: " + error);
 //Assume the local url exists
 document.location = 'contact_and_email_will.html';
});
I'm unable to identify any glaring errors. Any insights would be greatly appreciated. Thank you in advance!

Answer №1

My understanding has grown regarding the functionality of post and put requests. Post requests are capable of creating new files and adding content to them, while put requests can only edit existing files.

However, it's essential to note that in a REST API, there is a convention where a POST request is used to create new content, and a PUT request is utilized to modify existing content. This "content" can encompass various elements such as files, database records, or other data.

Nevertheless, this convention does not operate magically. The server must be set up to handle these requests accordingly. If you wish to create a JSON file on the server using a POST request, you need to develop server-side code that listens for this request at a specific URL and implements custom logic to save the JSON file in the desired location.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize React to reduce, replace, and encapsulate content within a span element

I have a Map that receives JSON data and generates a list item for each value. Then, I modify specific parts of the strings with state values. const content = { "content": [ { "text" : "#number# Tips to Get #goal#" ...

Dealing with illegal characters, such as the notorious £ symbol, in JSON data within a JQuery

I'm encountering an issue with a textarea and the handling of special symbols. Specifically, when I use $('#mytextarea').val() to retrieve text that contains '£', I end up seeing the black diamond with a question mark inside it. T ...

Alter the entity type when passing it as a parameter

Trying to alter the Entity type, I am invoking a function that requires two parameters - one being the entity and the other a location. However, when trying to assign a Type for the first entity, it throws an error: Error: Argument of type 'Node<En ...

When additional lines are drawn elsewhere on the HTML5 Canvas, the diagonal lines will gradually appear thicker and more pronounced

For horizontal and vertical lines, using a translation of 0.5 for odd stroke widths results in crisper and sharper lines. But what about diagonal lines? Link to jsfiddle <!DOCTYPE html> <html lang="en"> <body style="background: black"& ...

What is the best way to bring a nested object to the top level without deleting the original top level

Imagine having the following dataset: data = [{ "_id" : "2fApaxgiPx38kpDLA", "profile" : { "name" : "Karina 1", "avatar" : "avatar1.jpg", "bio" ...

The issue with Express connect-flash only showing after a page refresh instead of instantly displaying on the same page needs to be addressed

Here is the registration route code snippet: router.post("/register", function(req, res){ var newUser = new User({username: req.body.username}); User.register(newUser, req.body.password, function(error, user){ if(error){ req.fl ...

Launching a Node.js script with pm2 and implementing a delay

Utilizing the amazing pm2 package to maintain the longevity of my node.js applications has been extremely helpful. However, I have encountered a problem that I am unsure how to resolve. One of my applications involves multiple scripts, a server, and sever ...

Is there a way to transform a JSON object into a custom JavaScript file format that I can define myself?

I have a JSON object structured as follows: { APP_NAME: "Test App", APP_TITLE: "Hello World" } My goal is to transform this JSON object into a JavaScript file for download. The desired format of the file should resemble the follo ...

Is it possible to enlarge a div using "display: table-cell" property when clicked on?

There are various components displayed on my webpage: I require all components to have a minimum height of 150px. If the height is less than 150px, I want to vertically center their text. In case the height exceeds 150px, I aim to truncate the text at 15 ...

Utilizing JavascriptExecutor in Selenium Webdriver to start playing a video

Is it possible to trigger the play function in a page's JavaScript jQuery code using JavascriptExecutor? Below is an example of code extracted from a website: <script type="text/javascript"> jQuery(document).ready(function($) { $('#wp_mep ...

What is the best way to eliminate all click event handlers with jQuery?

I'm encountering an issue where multiple click events are being attached to a button. Specifically, when a user clicks on an 'Edit' link, the following JQuery code is executed: $("#saveBtn").click(function () { saveQuestion(id); }); Ea ...

Proceed the flow of event propagation using the react-aria button element

In the react-aria library, event bubbling for buttons is disabled. I am facing an issue where my button, which is nested inside a div that acts as a file uploader, does not trigger the file explorer when clicked due to event bubbling being disabled. How ...

Tips for executing a script on the "body" using "body onload=myfunc()" in an ASP.NET content page

I have included my script "myscript.js" in the master page. Now, in a content page, I want to load myscript() on startup (body onload). Is there a way to accomplish this? ...

Leveraging Angular-translate with state parameters

My current challenge involves using angular-translate for localization. Everything is working smoothly except for translating data within state parameters. As an example, consider a state configuration like this: .state('about', { url: "/ ...

Utilize the underscore method countBy to analyze the nested properties of objects within an array

When working with JavaScript, I am handling an array of objects structured as shown below: [ { "fields": { "assignee": { "email": "emailid1", "name": "name1" } } }, { "fields": { "assignee": { "e ...

Position a mesh at the bottom right of the screen using three.js

I am currently working on a FPS game using three.js. My goal is to lock the weapon at the bottom right corner of the screen, giving it a realistic feel like in other FPS games. After some initial experimentation, I have implemented a proof of concept that ...

Trigger function in a different child component on mouse up

Trying to call a function in a child component from another child component in ReactJS. Specifically, I want to trigger a function in another component when the 'mouseup' event happens. Here is an illustration of what I am attempting to achieve: ...

Open a submenu when clicking on an input field and automatically close it when the focus is lost

Is there an easier way to create a submenu that opens on input click and closes when losing focus using jQuery? Right now, I have achieved this functionality with the following code: $(document).mouseup(function (e){ var container = $(".container"); ...

Is your list rendering in Vue.js with AJAX ready to go?

At this moment, my Vue.js component is retrieving data from an Elasticsearch query and displaying it in a list like this: <li v-for="country in countries">{{ country.key }}</li> The issue I am facing is that I want to show users only a snippe ...

React not functioning properly when packaged with Webpack

I tried implementing React in the simplest way possible, but I am facing some issues. After bundling React and opening the index.html page, it shows up completely blank with no console errors to indicate any mistakes. Below is my webpack.config.js: const ...