Passing Json To Node.js From Angular2 Component

Question

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

Can you check network requests in the developer console. If your in chrome you can do this by opening up the dev tools and then click network. Click the button that triggers the post request. Check your dev tools to see that the call was triggered and it has the right body and parameters. Then check the response. What are you expecting the function to do with response data? You map the response to json but you dont return the json array from the function. How would you know its not working? — Daniel Kobe
– Daniel Kobe, Commented Nov 19, 2016 at 21:34
I am trying to insert the data into a database. So after I submit the form I am checking the console and I see the json being outputted there. Then I check the database and a new entry has not been made. As far as for addressSubmit being called yes that is the function that is running console.log(this.address); When I check the Network tab and then click Headers the json is not in there. — wuno
– wuno, Commented Nov 19, 2016 at 21:39

eko · Accepted Answer · 2016-11-19 21:38:29Z

2

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

answered Nov 19, 2016 at 21:38

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

3 Comments

wuno Over a year ago

Thanks man. When I check headers now in Network I can see the Request with the JSON in it. But it does not enter into the database. I appreciate you helping me this much but would you mind looking at how I am handling the data from node for me? Also the this.addressSubmit() where would you intend to put that? I noticed you added this to it so I was wondering if you were specifically saying you would add that to another function? I just want to understand your logic so I dont run into this type of issue again.

eko Over a year ago

@wuno I assumed you will use this.addressSubmit() in one of your lifecycle hooks in angular2. Like ngOnInit, ngAfterViewIinit etc. And since this is a function block. You call it with this which refers to your component. And when i look at your node code i see a small thing which might cause trouble. In your app.js, console.log your res and req, usually the data is stored inside req.body from a post operation. Moreover, you are using this.http.post in angular2 side but expecting app.get on the node side. Shouldn't it need to be app.post ?

wuno Over a year ago

Yes i got it fixed last night. It was just the fact that I was not using post on the back end. Thanks a lot for your help. I have no clue why my question got down voted. Typical.

Collectives™ on Stack Overflow

Passing Json To Node.js From Angular2 Component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related