CODEWITHSUNDEEP
javascriptjsonnode.jsangular
wuno
wuno

Reputation: 9885

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

Upvotes: 1

Views: 445

Answers (1)

eko
eko

Reputation: 40677

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);
})

Upvotes: 2

Related Questions