how to create a post request fetching data

Question

When the user clicks on the business name it needs to be saved as its favorite, taking the businessID and userID and insert it into the database. The backend is ready to get the post request but I have not figured out how to send that data.

This is the code I have been using to get the favorite business with the userid and businessid (In the backend there is a query that SELECT * from business etc...)

How can I change this code to make a POST request instead? (inserting a new fav business) Assuming in the backend there is a query with the INSERT INTO ....)

saveBusiness = (e) => {
    fetch("http://localhost:3030/favbusiness/" + this.state.selectedUserid + "/" + this.state.selectedBusiness)
    .then((response) => {
      return response.json();
    })
    .then(data => {
        let favBusinessFromApi = data.map(favorite => {
          return { value: favorite.businessid }
        });
        this.setState({
          favoriteBusiness: favBusinessFromApi
        });
    .catch(error => {
      console.log(error);
    });
  }  ```

Please have a look at this link https://javascript.info/fetch#post-requests — Harish Krishnan, Jun 26 '20 at 06:08
Does this answer your question? [POST Request with Fetch API?](https://stackoverflow.com/questions/39565706/post-request-with-fetch-api) — ABGR, Jun 26 '20 at 07:31

score 0 · Answer 1 · answered Jun 26 '20 at 06:07

You need to add OPTIONS before URL to say its a POST, like this:

saveBusiness = (e) => {
    const OPTIONS = {
        method: 'POST'
    }
    fetch("http://localhost:3030/favbusiness/" + this.state.selectedUserid + "/" + this.state.selectedBusiness, OPTIONS)
    .then((response) => {
      return response.json();
    })
    .then(data => {
        let favBusinessFromApi = data.map(favorite => {
          return { value: favorite.businessid }
        });
        this.setState({
          favoriteBusiness: favBusinessFromApi
        });
    .catch(error => {
      console.log(error);
    });
  }

If you need more options or more info: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

score 0 · Answer 2 · answered Jun 26 '20 at 06:08

0

You can simply add method: 'POST',

saveBusiness = (e) => {
    fetch("http://localhost:3030/favbusiness/" + this.state.selectedUserid + "/" + this.state.selectedBusiness,{
  method: 'POST', 
})
    .then((response) => {
      return response.json();
    })
    .then(data => {
        let favBusinessFromApi = data.map(favorite => {
          return { value: favorite.businessid }
        });
        this.setState({
          favoriteBusiness: favBusinessFromApi
        });
    .catch(error => {
      console.log(error);
    });
  };

Read More about fetch and how you can pass headers Here

answered Jun 26 '20 at 06:08

ABGR

4,631
4
27
49

Report the obvious dupes instead of answering them: https://stackoverflow.com/questions/39565706/post-request-with-fetch-api – Always Helping Jun 26 '20 at 06:45
here is one more similar: https://stackoverflow.com/questions/29775797/fetch-post-json-data – Always Helping Jun 26 '20 at 06:46
The others who followed me are here on SO for years and i only joined not even a month ago. You can post same comment and let them know as well. And this question is clearly as Dup of fetch request post. If the OP had been the given these Dup post link he could have got the answer. Have a good day. – Always Helping Jun 26 '20 at 07:19

score 0 · Answer 3 · answered Jun 26 '20 at 06:12

saveBusiness = (e) => {
    fetch("http://localhost:3030/favbusiness/" + this.state.selectedUserid + "/" + this.state.selectedBusiness, {
    method: 'POST',
    body: JSON.stringify(e.data), // this should be the data that you want to post
})
    .then((response) => {
      return response.json();
    })
    .then(data => {
        let favBusinessFromApi = data.map(favorite => {
          return { value: favorite.businessid }
        });
        this.setState({
          favoriteBusiness: favBusinessFromApi
        });
    .catch(error => {
      console.log(error);
    });
  }

how to create a post request fetching data

3 Answers3