How to pass data from angular to node js server?

Question

My app.component.ts contains

login() {
    var user = `{ email: ${this.email}, password: ${this.password} }`
    const headers = new HttpHeaders()
                    .set('Authorization', 'my-auth-token')
                    .set('Content-Type', 'application/json');
    this.http.post('http://localhost:3000/signin', user, {
          headers: headers 
    }).subscribe(data => {

   });
   console.log(`email: ${this.email} password: ${this.password}`) 
}

When trying to get the data in node I get

error: SyntaxError: Unexpected token e in JSON at position 2

I am using

req.body

to get the data. What is the correct way to parse the JSON data? Also wanted to know if this is the correct way to pass form data from angular to node?

You should stringify the user like this : JSON.stringify(user) — Sanoj_V
– Sanoj_V, Commented May 18, 2018 at 7:45
That gives error: SyntaxError: Unexpected token " in JSON at position 0 — Tech Team
– Tech Team, Commented May 18, 2018 at 7:52

oceania · Accepted Answer · 2018-05-18 07:50:25Z

2

var user = { 
    email: this.email, 
    password: this.password 
}
...
this.http.post('http://localhost:3000/signin',user).subscribe(...)

answered May 18, 2018 at 7:50

oceania

788 bronze badges

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

2 Comments

Tech Team Over a year ago

why should i remove the headers ?

oceania Over a year ago

You should change the "user" to be Object type rather than String type

Adrii · Accepted Answer · 2018-05-18 08:14:53Z

1

With Angular 6 HttpClient, you don't need to stringify your object (see POST example from official doc). In the same way, for a GET request, HttpClient parse json data for you.

Try this :

login() {
   const user = { email: this.email, password: this.password };

   const headers = new HttpHeaders({
      'Authorization': 'my-auth-token',
      'Content-Type': 'application/json'
   });

   this.http.post('http://localhost:3000/signin', user, {
     headers: headers 
   }).subscribe(data => {});
 console.log(`email: ${this.email} password: ${this.password}`) }

edited May 18, 2018 at 8:14

answered May 18, 2018 at 8:07

Adrii

1,7701 gold badge14 silver badges21 bronze badges

Comments

Akash Gupta · Accepted Answer · 2018-05-18 09:40:57Z

1

user= {
   email: [email protected],
   password: 123,
    }               
            $http({
                method: "POST",
                url: http://localhost:3000/signin,
                data: JSON.stringify(user),
                headers: headers 
            }).success(function(data) {
               // you can print data hera
                }
            }).error(function() {

            });

edited May 18, 2018 at 9:40

answered May 18, 2018 at 7:48

Akash Gupta

3410 bronze badges

2 Comments

Tech Team Over a year ago

this has to be added in app.component.html file ?

Akash Gupta Over a year ago

you can also use the RXJS library , to hit the API, using RXJS library is the better way

Toshkata Tonev · Accepted Answer · 2018-05-18 08:03:12Z

0

First i thought you using an object for the user, than a saw it's a string. Your data is not with correct json format. Try to put quotes on the fields name

var user = `{ "email": ${this.email}, "password": ${this.password} }`

WRONG!

You should stringify the data - JSON.stringify(user)

this.http.post('http://localhost:3000/signin', JSON.stringify(user), {
  headers: headers 
}).subscribe(data => {

});

edited May 18, 2018 at 8:03

answered May 18, 2018 at 7:44

Toshkata Tonev

1,5111 gold badge11 silver badges12 bronze badges

4 Comments

Tech Team Over a year ago

that gives error: SyntaxError: Unexpected token " in JSON at position 0

Tech Team Over a year ago

also doing this makes it to a string whereas i have mentioned in the header to use content type json

Toshkata Tonev Over a year ago

Yeah, I saw I was wrong, I edit my answer. This should work.

Tech Team Over a year ago

Okay. But i still get error: SyntaxError: Unexpected token " in JSON at position 0. I should be fetching it using request.body , right ?

Collectives™ on Stack Overflow

How to pass data from angular to node js server?

4 Answers 4

2 Comments

Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related