Search in Angular with Elasticsearch

Question

so i am very new to Angular and elastic and i need ur help because i am stuck and couldn't find anything online. So i want to make a search bar which sends a GET request to my elasticsearch database and looks for usernames. I am using Angular for my project and like i said i never used both of them before (university project)

So i have my search service which should use the elastic URL with the search for usernames and a getElasticResult methode which sends the GET request with the searched Text/username:

import { Injectable } from '@angular/core';
import {HandleError, HttpErrorHandler} from '../http-error-handler.service';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {User} from '../timeline/user';
import {Observable} from 'rxjs';


const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
};

@Injectable({
  providedIn: 'root'
})

export class SearchService {

  getElastic = 'http://34.65.42.287:9200/users/_doc/_search?q=username:';
  private handleError: HandleError;

  constructor(
    private http: HttpClient,
    httpErrorHandler: HttpErrorHandler) {
    this.handleError = httpErrorHandler.createHandleError('TimelineService');
  }
  /** GET elasticsearch result */
  getElasticResult( text: string ): Observable<User> {
    return this.http.get<User>(this.getElastic + text);
  }
}

Then i have a component file which creates the search form and a user to safe the user from the GET request. the getUser method reads the text from the form and calls the getElasticResult method to get the user from elastic and safes it on the newly created user:

import {Component, OnInit, Pipe, PipeTransform} from '@angular/core';
import {SearchService} from './search.service';
import {User} from '../timeline/user';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-search-service',
  templateUrl: './search.component.html',
  providers: [SearchService],
  styleUrls: ['./search.component.css']
})

export class SearchServiceComponent {
  user: User;
  angForm: FormGroup;


  constructor(private searchservice: SearchService, private  fb: FormBuilder) {
    this.createSearchForm();
    console.log('adasd');

  }

  createSearchForm() {
    this.angForm = this.fb.group({
      searchText: ['', Validators.required]
    });
  }

  getUser(text: string): void {
    text = this.angForm.get('searchText').value;
    this.searchservice.getElasticResult(text).subscribe(user => (this.user = user));
  }
}

And now to the HTML part of this service. This is where i have no clue what to do to be honest. I tried making a form with the angForm from the component but i do not really now how to send the inputed data to the component and then to show the found user under the searchbar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form [formGroup]="angForm"  class="form-inline my-5 my-lg-0">
  <input id="searchText" name="searchText" class="form-control" type="text" placeholder="Search for user" aria-label="Post"
         formControlName="searchText" required>
   <p> {{getUser("elon")}}</p>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

</body>
</html>

Here the searchbar:

thisdotutkarsh · Accepted Answer · 2020-05-22 20:44:15Z

1

You can implement the following,

In your component.ts file,

getUser() {
 let userName = this.angForm.value.searchText;
 console.log(this.angForm.value, userName);
 this.searchservice.getElasticResult(userName).subscribe(user => (this.user = user))
}

Also,

In your component.html file,

Initialize form element, <form [formGroup]="angForm" (ngSubmit)="getUser()">

Also, in your component.ts file.

import {FormBuilder, Validators} from '@angular/forms';
    export class SearchServiceComponent {
     angForm = this.fb.group({
      searchText: ['', Validators.required]
    });

    constructor(private fb: FormBuilder, private searchservice: SearchService ) { }

    //Code

    }

edited May 22, 2020 at 20:44

answered May 22, 2020 at 17:35

thisdotutkarsh

9806 silver badges7 bronze badges

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

13 Comments

SkurSkurrrr Over a year ago

thx for the reply, i did that but i don't see anything in the console or under the search bar

thisdotutkarsh Over a year ago

Can you share the Stackblitz link?

SkurSkurrrr Over a year ago

Sorry it is a very big project, and not on Stackblitz

SkurSkurrrr Over a year ago

oh and btw shouldn't the searchservice also be declared in the constructor ?

SkurSkurrrr Over a year ago

Okay i think i got a idea whats wrong haha i saw in my browser that the sent text is not added to the URL as a text but like this "...:9200/users/_doc/_search?q=username:[object%20Object] "

|

Collectives™ on Stack Overflow

Search in Angular with Elasticsearch

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related