send data to json file with javascript fetch api

Question

i have one empty json file. I want to add json data to my json file when button is clicked. but it gives error 405. how can I do?

error:

POST net::ERR_ABORTED 405 (Method Not Allowed)

code:

var data={
                        method:"POST",
                        body:{
                            userId:1,
                            title:"sample title",
                            body:"sample body"
                        },
                        headers:new Headers({
                            'content-type':'application/json',
                            'dataType': 'json'
                        })
                    }

           

                    fetch("anaveri.json",data).
                    then(res=>{
                        console.log(res);
                    }).
                    catch(error=>{
                        console.log(error);
                    });

No, you cannot update the JSON files in this way. better use a DB. or update JSON with the help of a Node server — Sojin Antony
– Sojin Antony, Commented Jan 18, 2022 at 11:36
'dataType': 'json' is a value for jQuery options. It isn't an HTTP request header. You aren't using jQuery. Get rid of it. — Quentin
– Quentin, Commented Jan 18, 2022 at 11:37
@qeqqw — I commented it was nonsense, not that it was the cause of your problem. See my answer for how to solve the problem. — Quentin
– Quentin, Commented Jan 18, 2022 at 11:39
@shaedrich — One of the effects of setting 'dataType': 'json' as a jQuery option is to set the Accept header. This isn't jQuery though, this is fetch which doesn't support that. — Quentin
– Quentin, Commented Jan 18, 2022 at 11:41

Quentin · Accepted Answer · 2022-01-18 11:40:51Z

The browser isn't able to directly write data to the server's file system.

It would be a horrible security problem if it could. Google's homepage would get overwritten with some different bit of trolling every few seconds!

The browser can send an HTTP request to a URL. The server then needs to use server side programming to process that request.

You need to pick a programming language that your server supports (or change servers to one that supports your server-side language of choice) and write a webservice that takes the data from the request and stores it.

You could have it write directly to a JSON file, but that risks "fun" problems with concurrent writes so it is more typical to store the data in a database and have another webservice generate the JSON on demand.

You should consider adding some sort of tests (e.g. password authentication and data validation) to control who can insert new data and what sort of data they can insert to avoid the aforementioned vandalism problem.

shaedrich · Accepted Answer · 2022-01-18 11:36:42Z

1

Client-side scripting isn't allowed to change files on the server or the local file system for security reasons. Depending on what you're trying to achive, you need to do one of these things:

Send your data to your server via POST and your server does the saving
Create the file contents blob and download it
Use the browser's FileSystem API instead of the client one's

answered Jan 18, 2022 at 11:36

shaedrich

5,7633 gold badges31 silver badges47 bronze badges

Comments

ardentia · Accepted Answer · 2022-01-18 11:38:41Z

0

405 (Method Not Allowed) means that the resource you're querying (in this case, your json file) does not implement the method you're trying to use on it. In order to add information to your json file, you need to have some sort of a backend logic that implements a RESTful API, so that you can issue requests using JavaScript - you can't just do it with JavaScript alone.

answered Jan 18, 2022 at 11:38

ardentia

7263 silver badges12 bronze badges

Collectives™ on Stack Overflow

send data to json file with javascript fetch api

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related