error using http.post in angular2

Question

I am getting 400 (Bad Request) error. The method search($event,'btn') is called on the click of button in abc.component.html ,which later calls some method in service to fetch data.

Here, getFilteredData() method is providing data while searchData() method is not providing data but providing 400 error. Here is the image showing error

abc.component.html

<input [(ngModel)]="searchData" class="form-control"  type="text" placeholder="Search Keywords : 'Lenovo', 'May', 'New York'" style="height: 30px;" />
<input  type="checkbox" id="chckbox" [(ngModel)]="checked" class="form-control"  style="width: 34px;height: 32px;margin:0px;" #chkbox checked>

<button (click)="search($event,'btn')" class="btn btn-success" style="height:30px;padding: 0px 30px">Search </button>

json-data.service.ts

searchData(searchText:JsonData): Observable<JsonData[]> {
            console.log('Retriving Data from Solr Server.......');
            let headers = new Headers({ 'Content-Type': 'application/json' });
            let options = new RequestOptions({ headers: headers });
            let url = "http://192.10/PIdString";
            return this.http.post(url,searchText,options).map((res: Response) => res.json()).catch(this.handleError);
          }

getFilteredData(searchText:JsonData): Observable<JsonData[]> {
                console.log('Retriving Data from Solr Server.......' + JSON.stringify(searchText));
                let headers = new Headers({ 'Content-Type': 'application/json' });
                let options = new RequestOptions({ headers: headers });
                let url = "http://1921.le"; //Local Server
                return this.http.post(url, searchText,options).map((res: Response) => res.json()).catch(this.handleError);
              }

abc.component.ts

checked:boolean = true;
          constructor(public jsonDataService: JsonDataService, public injector: Injector) { }

      search(event, from) {
            if(this.checked){
              alert("checked");
            }
            else{
              alert("unchecked");
            }
            if (this.searchData === "" || this.searchData === null) {
           alert("Enter any keyword to search !");
            }else if(this.checked === true && this.searchData === "" || this.searchData === null ){
              alert("Enter any keyword to search !");
            }else if(this.checked !== true && this.searchData === "" || this.searchData === null){
        alert("Enter any keyword to search !");
            }else if(this.checked === true && (this.searchData !== "" || this.searchData !== null)){
        console.log("checked");
        console.log("Searching.......");
           this.jsonDataService.getFilteredData(this.searchData).subscribe(
                  success => this.buildDataUI1(success),
                  error => this.errorMessage = <any>error);  
            }
            else if(this.checked === false && (this.searchData !== "" || this.searchData !== null)){
              console.log("unchecked");
              console.log("Searching.......");
                 this.jsonDataService.searchData(this.searchData).subscribe(
                    success => this.buildDataUI1(success),
                    error => this.errorMessage = <any>error);      
            } 
        }

Answer 1

I can't see what your JSONData is like so I'm only guessing.

• Your model searchData seems to be a string based on your <input> placeholder.
• Your component passes searchData as it is to your service functions.
• Your service functions passes searchData as it is directly as your POST payload.

Your endpoint is probably expecting a JSON string, not a plain string.