Getting empty object while POST request using fetch API

Question

I am a newbie in express/Node.js things. I tried to post a request containing the current user location(longitude and latitude using geolocation api).

/public/index.html

<!DOCTYPE >
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hey</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <button id="submit" class="click-btn">Submit my Location</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>

/public/main.js

//navigating the user's current location using geolocation web api
const pos = {};
if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(
    (location) => {
      pos.latitude = location.coords.latitude;
      pos.longitude = location.coords.longitude;
    },
    (err) => console.log(err.message)
  );
} else {
  console.log("oops");
}

// handling submit location to send
// latitude, longitude to the server we created
const submit_button = document.getElementById("submit");

submit_button.addEventListener("click", (e) => {
  e.preventDefault();
  const options = {
    method: "POST",
    header: {
      "Content-Type": "application/json",
    },
    body: pos,
  };
  console.log(pos);
  fetch("/api", options);
});

/index.js

const { json } = require("express");
const express = require("express");
const app = express();

app.listen(3000, () => console.log("listeninig...."));
app.use(express.static("public"));
app.use(express.json({ limit: "1mb" }));

app.post("/api", (request, response) => {
  console.log("I got request!");
  console.log(request.body);
});

Above index.js is server code. When I run index.js in the terminal I got the following output.

I got request!
{}

But in browser console, Object { latitude: 27.6430848, longitude: 84.115456 } is showing. That means pos is not empty object. So why is it showing empty object in server side. Thank you in advance.

While that shouldn't be a problem here, note that navigator.geolocation.getCurrentPosition is asynchronous. Hoping that the properties will be set on pos by the time the button is clicked isn't a good approach. Better put the logic in a function that can be called from the event handler have it return (a promise that resolve to) the position. — Felix Kling
– Felix Kling, Commented May 12, 2021 at 12:01
@FelixKling I did console log inside event listener function and it's showing me pos object as I mentioned above. So I dont think its because of asyncronous property of geolocation.getCurrentPosition function. — Sachin Bhusal
– Sachin Bhusal, Commented May 12, 2021 at 13:30
That's why I said "While that shouldn't be a problem here". It's still better to architect this differently so that you will never run into this issue when you change your code. — Felix Kling
– Felix Kling, Commented May 12, 2021 at 14:26

esqew · Accepted Answer · 2021-05-12 11:59:04Z

1

You have to stringify the object you pass to fetch’s body parameter (in this case, in your /public/main.js file):

const options = {
  method: "POST",
  header: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(pos),
};

answered May 12, 2021 at 11:59

esqew

45k28 gold badges139 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felix Kling Over a year ago

@SachinBhusal: You have to be more specific than that. "not working" is not a problem description that we can help you with.

Sachin Bhusal Over a year ago

@esqew Changing pos to JSON.stringify(pos) is still giving me empty object. And console log the response from the server like fetch("/api", options) .then((res) => console.log(res)).catch((err) => console.log(err.message)); is showing me error saying Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource. How to resolve this?

Prathamesh More · Accepted Answer · 2021-05-12 12:27:31Z

0

Convert your body to a string before sending it to the server

//navigating the user's current location using geolocation web api
const pos = {};
if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(
    (location) => {
      pos.latitude = location.coords.latitude;
      pos.longitude = location.coords.longitude;
    },
    (err) => console.log(err.message)
  );
} else {
  console.log("oops");
}

// handling submit location to send
// latitude, longitude to the server we created
const submit_button = document.getElementById("submit");

submit_button.addEventListener("click", (e) => {
  e.preventDefault();
  const options = {
    method: "POST",
    header: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(pos),
  };
  fetch("http://localhost:3000/api", options).then(res => {
    console.log(res)
  });
});

<!DOCTYPE >
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hey</title>
</head>

<body>
  <h1>Welcome</h1>
  <button id="submit" class="click-btn">Submit my Location</button>
  </div>
  <script src="main.js"></script>
</body>

</html>

edited May 12, 2021 at 12:27

answered May 12, 2021 at 12:00

Prathamesh More

1,4802 gold badges18 silver badges36 bronze badges

7 Comments

Sachin Bhusal Over a year ago

I converted to a string as you said but not working.

Prathamesh More Over a year ago

Can you console log the response from the server?

Prathamesh More Over a year ago

fetch("https://jsonplaceholder.typicode.com/posts", options).then(res => { console.log(res) }); Like this?

Sachin Bhusal Over a year ago

No i got nothing

Sachin Bhusal Over a year ago

When i added .catch too to that statement like fetch("/api", options) .then((res) => console.log(res)) .catch((err) => console.log(err.message)); then I got error saying `Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.'.

|

Collectives™ on Stack Overflow

Getting empty object while POST request using fetch API

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related