Problem with sending data from Angular to Express

Question

I'm trying to post data from Angular to Express.js

This is my function connected to the button (TypeScript):

  upload(): void {
    const nameFromId = document.getElementById('taskName') as HTMLInputElement;
    this.taskName = nameFromId.value;

    const testData = [
      {
        task: this.taskName,
        selectedType: this.selectedType,
        selectedSubject: this.selectedSubject
      }
    ];
    const body = JSON.stringify(testData);
    this.http.post('/api/upload', body)
      .subscribe();

"body" is not null

This is express:

const express = require('express');
const path = require('path');
const app = express();
const port = 8080;
const bodyParser = require('body-parser');


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


app.post('/api/upload', (req, res) => {
  let task = req.body.task;
  let selectedType = req.body.selectedType;
  let selectedSubject = req.body.selectedSubject;

  console.log("task: " + task);
  console.log("type: " + selectedType);
  console.log("subject: " + selectedSubject);
  console.log("server: " + req.body);
  res.end("yes");
})

app.use(express.static(__dirname + '/dist/al'));

app.get('/*', function (req, res) {

  res.sendFile(path.join(__dirname + '/dist/al/index.html'));
});

app.listen(process.env.PORT || port);

And this is what I get as a mistake:

mistake from console

If I put extra options to my "post method" from Angular and write something like:

this.http.post('/api/upload', body, {responseType: 'text'})
      .subscribe();

After adding responseType: 'text' this mistake is no longer exists, but when it comes to console.log all data, that I posted to express, undefined:

Express console.log

What am I doing wrong?

Also, it seems like your req.body does not contain any "task", "type" or "subject". You could console.log JSON.stringify(req.body) to see what's inside of the actual object (and not get "[object Object]" — Edgardo Rodríguez
– Edgardo Rodríguez, Commented Mar 30, 2021 at 21:53
My initial intuitive guess would be that you can't send an array as the top level 'container' of a post request. Try just sending the one object and see what happens. — Cody Haines
– Cody Haines, Commented Mar 30, 2021 at 22:44
Cody, I've just tried it, but still has undefined on post request from Express. — GlKosh
– GlKosh, Commented Mar 30, 2021 at 22:55

andellapie · Accepted Answer · 2021-03-30 22:50:06Z

2

You are sending a string as http request body. Don't use JSON.stringify, try sending object as is.

const testData = [
      {
        task: this.taskName,
        selectedType: this.selectedType,
        selectedSubject: this.selectedSubject
      }
    ];

const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type': 'application/json',
    })
}

this.http.post('/api/upload', testData, httpOptions)
  .subscribe();

Also add this line to server:

app.use(bodyParser.json());

Finally:

const bodyParser = require('body-parser');    
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(bodyParser.json());

edited Mar 30, 2021 at 22:50

answered Mar 30, 2021 at 21:49

andellapie

1762 bronze badges

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

6 Comments

GlKosh Over a year ago

I've just tried it, but still doesn't work

andellapie Over a year ago

Are you using body-parser module before post middleware? const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.urlencoded({ extended: true }));

GlKosh Over a year ago

andellapie, no I'm not. But I've just tried to use it and it still doesn't work

andellapie Over a year ago

I've updated my answer with httpOptions. Give it a try

GlKosh Over a year ago

andellapie, I've just updated my program and my post above, but still can only get undefined. I think that I've got a problem with my front end post request. Because at express even when I used JSON.parse(req.body) - it showed "{}"

|

Collectives™ on Stack Overflow

Problem with sending data from Angular to Express

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related