How to pass a string parameter from angular UI to node.js backend?

0 votes

I try to take the input in enteredValue and pass it on to http.get call as params:this.enteredValue and to node.js as req.params,as you can see below if I hardcode the string value for "orgChange",it works fine but somehow passing params is not working and throwing errors?any guidance on how to fix this?

html:

<textarea rows="6" [(ngModel)]="enteredValue"></textarea>
<hr>
<button (click)="get_change_lifecycle_data()">Search</button>

<p>{{newPost | json }}</p>

component

import { Component, OnInit, Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Subject } from "rxjs";
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-change-input',
  templateUrl: './change-input.component.html',
  styleUrls: ['./change-input.component.css']
})


export class ChangeInputComponent  {

constructor(private http: HttpClient) {}

enteredValue : any;
newPost : any;
get_change_lifecycle_data(){
     this.http.get('http://localhost:3000/api/change_life_cycle2',{params:this.enteredValue}).subscribe(response => {
     console.log(response);
      this.newPost = response
      });
}

}
Apr 22 in Angular by kartik
• 11,290 points
96 views

1 answer to this question.

0 votes

Hello Kartik,

There are three ways to get parameters to express:

  1. req.query --> this case, query parameters
  2. req.body --> post request body payload
  3. req.params --> /:someParam in url params

It should be req.query.searchKey.

Change the query to like this: u need to pass different params with different names:

this.http.get('http://localhost:3000/api/change_life_cycle2', 
  {
    params:{
    searchKey: this.enteredValue
    }
  }).subscribe(response => {
    console.log(response);
    this.newPost = response
});

In API side read the params in the request like this:

app.get("/api/change_life_cycle2", (req, res, next) => {
    console.log(req.body)
     Change_life_cycle.find({ orgChange: req.query.searchKey }).then(documents => {
        res.status(200).json({
          message: "Posts fetched successfully!",
          posts: documents
        });
      });
    });
answered Apr 22 by Niroj
• 22,790 points

Related Questions In Angular

0 votes
1 answer

How can we reload a page after requesting the same get parameter using AngularJS?

hey kartik, The reason for this is that ...READ MORE

answered Feb 10 in Angular by Niroj
• 22,790 points
702 views
0 votes
1 answer

How to load external scripts dynamically in Angular?

Hello kartik, You can use following technique to ...READ MORE

answered Apr 22 in Angular by Niroj
• 22,790 points
499 views
0 votes
1 answer

How can we redirect to an existing route using ngRoute?

Routing is just another way of fixing some content ...READ MORE

answered Feb 6 in Angular by Niroj
• 22,790 points
95 views
0 votes
1 answer

How to perform Email Validation in Javascript?

Validation is a method to authenticate the ...READ MORE

answered Feb 6 in Angular by Niroj
• 22,790 points
31 views
0 votes
1 answer

What is meant by passing the variable by value and reference in PHP?

Hello, When the variable is passed as value ...READ MORE

answered Mar 27 in PHP by Niroj
• 22,790 points
36 views
0 votes
1 answer

Connection with MySQL server using PHP. How can we do that?

Hey @kartik, You have to provide MySQL hostname, ...READ MORE

answered Mar 27 in PHP by Niroj
• 22,790 points
41 views
0 votes
1 answer

How to retrieve or obtain data from the MySQL database using PHP?

Hello kartik,  Actually there are many functions that  ...READ MORE

answered Mar 27 in PHP by Niroj
• 22,790 points
33 views
0 votes
1 answer

What are the differences between mysqli_connect and mysqli_pconnect?

Hello, mysqli_pconnect() function is used for making a persistence ...READ MORE

answered Mar 27 in PHP by Niroj
• 22,790 points
71 views
0 votes
1 answer

How to detect a route change in Angular?

Hii Kartik For Angular 7 someone should write like: this.router.events.subscribe((event: Event) ...READ MORE

answered Apr 22 in Angular by Niroj
• 22,790 points
303 views
0 votes
1 answer

How can we redirect to another page from existing page on clicking alert?

hii, It is really simple to redirect from ...READ MORE

answered Feb 6 in Angular by Niroj
• 22,790 points
163 views