wuno wuno - 20 days ago 6
JSON Question

Passing Json To Node.js From Angular2 Component

I am trying to insert data into a database from Angular2 and Node.js

When I run my script I

console.log(this.address);
to make sure I am passing
json
and this is the output to the console.

Address {street: "1111 NW 40TH AVE", city: "MIAMI", state: "Florida", zip: "33167"}


But the record is not entering into the database. I know I have a connection but I am missing something here and not sure how to trouble shoot it from here.

In the component this is the
http.post


addressSubmit() {
this.addressSubmitted = true;
var headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http
.post('http://localhost:4200/profile/addAddress', this.address, { headers: headers })
.map(response => response.json());
console.log(this.address);
}


So with that function I know I have a function that appears to be passing
json
.

Then in the backend with node I am receiving the json like this,

addAddress: function(req, res) {
pool.connect(function(err, client, done) {
if (err) {
return console.error('error fetching client from pool', err);
} // end of error catch while creating pool connection

var query = client.query("insert into address (street, city, state, zip) " +
"values ('" + req.query.street + "','" + req.query.city + "','" +
req.query.state + "','" + req.query.zip + "')"); // create the query

query.on("end", function(result) {
client.end();
res.write('Success');
res.end();
}); // handle the query
done(); // release the client back to the pool
}); // end of pool connection
pool.on('error', function(err, client) {
console.error('idle client error', err.message, err.stack)
}); // handle any error with the pool
} // End addAddress function


Handling the routes like this,

router.get('/profile/addAddress', connection.addAddress);


In app.js

app.get('/profile/addAddress', function(req,res){
db.addAddress(req,res);
});


So at this point. I know I am passing json. I know I have a connection to the database. I can retrieve entries and output them to the browser by entering them manually and going to an
express route
.

I am only missing passing the data back and forth from
angular2
to
node
. Then from
node
back to
angular2
.

Now with the help of echonax answer I have this in the query string under Network tab,

Query String Paramaters

street:11700 NW 36TH AVE
city:MIAMI
state:Florida
zip:33167

Answer

I think you are not making a request to your back-end.

Your

this.http
      .post('http://localhost:4200/profile/addAddress', this.address, { headers: headers })
      .map(response => response.json());

line returns an Observable and this observable is called only when it is subscribed.

so make your addressSubmit() return this observable like this:

 addressSubmit() { 
      this.addressSubmitted = true; 
      var headers = new Headers();
      headers.append('Content-Type', 'application/json');
      return this.http
      .post('http://localhost:4200/profile/addAddress', this.address, { headers: headers })
      .map(response => response.json());
  }

then in your code call it like this:

this.addressSubmit().subscribe((response)=>{
    //do something with the response here
    console.log(response);
})