My Angular post request lacks any content in the body

I am facing an issue where the body of my Angular post request is empty on my server. The post request from my client application looks like this:

var data = {
      Stime: '+this.Stime+',
      Etime: '+this.Etime+',
      eAMPM: '+this.eAMPM+',
      sAMPM: '+this.sAMPM+',
      id: '+this.id+',
      activity: '+this.activity+',
      auto_insert: '+this.auto_insert+',
      yearmonthday: '+this.yearmonthday+',
      color1: '+this.c+'
   }
   this.$http({
       method: 'POST',
       url: 'http://localhost:3000/operation',
       data: JSON.stringify(data)
   })

Prior to using this post request, I was sending a very long query string which worked perfectly fine for passing the data. However, now that I am cleaning up my code, this method is not working. On the server side, when I try to access the body of the post request, it shows as empty:

app.post('/operation', function(req,res){
   console.log(req.body); //prints {}
   res.send("inserted");
});

In addition, on the server side I have the following configurations:

var express = require('express'),
app = express(),
bodyParser = require('body-parser'),
cookieParser = require('cookie-parser'),
multer = require('multer'),
jsonParser = bodyParser.json()

app.use(jsonParser)
app.use(bodyParser.urlencoded({
  extended: true
}))
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

Answer №1

To ensure that the data is available inside the app.post(...) {} function, you must wait for it to be ready using the following code snippet:

    var completeData = '';
    req.on('data',function(data) { completeData += data; });
    req.on('end', function(data) {
        req.data = JSON.parse(completeData);
        console.log(req.data);
    });

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

Sending an axios GET request to an Express server works flawlessly on the initial attempt

I'm facing an issue while setting up a route to download videos in my Vue app, which is backed by an Express server. The first request sent to the backend works fine and the file is downloaded successfully. However, subsequent requests fail with a Net ...

Discovering whether the URL domain matches the email domain is simple with these steps

I am trying to verify if the domain in a URL matches the domain in an email address on my sign up form. I have successfully achieved this by comparing the domains extracted from both the URL and the email using the following code: if (getDomainFromUrl(url ...

Using PHP, jQuery, and HTML to submit a form and insert data into MySQL, all while

I am facing an issue with my PHP intranet site, which includes an HTML form with 2 input fields. My goal is to take the user's input from the form and insert it into a MySQL database without redirecting the user to another page. I have a separate PHP ...

What is the function type in React-Native?

I need assistance understanding the following function: const myFunction = () => () => { //perform a task } Can someone explain the meaning of this function? ...

What is the extent of a variable within a jQuery function?

Similar Question: Understanding Asynchronous Behavior in Ajax Question: Why does my variable "temp" remain as 0 after the AJAX request? function calculate7() { var temp = 0; $.ajax({ type: "POST", ...

Adding text to several elements by class in Vue.js

Although I am aware that directly modifying the dom in vue.js is not recommended, I find that the alternatives would result in much messier and harder to maintain code. The Challenge Currently, with the use of vue-i18n, I need to dynamically move the curr ...

I'm looking for a way to showcase tasks in Fullcalendar that don't have a set end date

Is there a way to display a task in the full calendar when the task has a start date but no defined end date, such as a promotion that lasts until stock runs out? I would like the timeline for this type of task to extend indefinitely. However, since such ...

Unreliable passing of variables from Express to Jade

Currently experimenting with Node.js, Express, Jade, and MongoDB, I encountered an unusual issue related to rendering. I passed the variable "users" which is obtained from a database query like so: userProvider.findByIds(ids, function(error, users) { re ...

Encountering an "Unmet Peer Dependency" error message while attempting to integrate bootstrap-ui into my Angular project

Currently, my goal is to successfully install angular-ui. Following the tutorials, I have attempted all commands such as: npm install angular-bootstrap However, this command results in an error message: +-- UNMET PEER DEPENDENCY angular@>=1.5 After ...

Send an ajax request to upload several images to the server

I am currently facing an issue with my web application that allows users to create posts with a maximum of 15 images. I have implemented AJAX requests to send all the data, including the images, in one request. However, I encountered this error: An error ...

Disable menu bar | customize menu bar in electronJS

I am developing an Angular application with Electron.js. Due to the specific design requirements of my app, which is browser-based, I do not require or want the default Electron.js menu or menu bar to be displayed. Is there a way to remove it from my app ...

Leverage jsencrypt in Ionic 3

Struggling to hash passwords for login on my Ionic 3 app, I attempted using jsencrypt following a tutorial but encountered issues as I couldn't grasp how it works... Here's what I tried : npm install --save jsencrypt import { Component } from ...

What is the best way to generate a dynamic HTML page output in Next.js?

Is there a way to generate a dynamic page in Next.js with HTML output? I have a dynamic page that doesn't create a file after export. When clicking on the links, the page loads, but upon refreshing a 404 error is displayed. Can dynamic page links be d ...

What is the best method for securing my API key within the script.js file while utilizing dotenv?

My goal is to conceal my API key using dotenv. Interestingly, when I replace require('dotenv').config(); with my actual API key in the code as apiKey: process.env.API_KEY, it works fine despite not using process.env.API_KEY. I made sure to inst ...

Having difficulty extracting data from certain tables with Beautiful Soup

I have been utilizing BeautifulSoup for data scraping from the website here. Although there are a total of 9 tables with the same class name, I am only able to extract information from 5 of them. What modifications should I implement in my code to ensure t ...

Populate a JavaScript object with a multi-dimensional array of a specified length

Attempting to grasp the concept of javascript objects and arrays, I experimented with filling and accessing an object in the following manner: obj_keys = [1,2,3,4,5,6,7]; o = {}; $.each(obj_keys, function(k, v){ o[v] = []; for(var c; c < 10; c ...

Manipulating data rows in a table using jquery

I have a button called #add that, when clicked, adds a new row to a table. The last cell of the newly inserted row contains a delete icon that, when clicked, should remove the entire row. I thought I had everything set up correctly, but for some reason, c ...

What is the best way to assign multiple values to a single key without replacing the existing value?

My goal is to store multiple values for a single key by utilizing arrays within my main object. I've been struggling with this and feeling discouraged, questioning why I thought I could accomplish it. Can someone provide guidance on the best approach ...

The console is displaying a state that has not been updated in the Redux reducer yet

I am currently facing a puzzling issue that I can't quite pinpoint whether it's related to Chrome console, Redux, or JavaScript objects. Within my React + Redux application, I have the following function: function InputReducer(state = [{ }], ac ...

BX-Slider allows for the insertion of Prev and Next Arrows in both the Main Div and Inner Divs

I am facing an issue with positioning inner boxes (divs) to the left or right of each slide while adding some text. Although styling them is easy, the problem arises when the Previous and Next arrows appear inside the secondary/inner div, as shown in the a ...