Angular & Laravel Advanced Searching

Question

I'm doing full stuck development using Angular12 as Front End and Laravel as BackEnd. I want to do a search using multiple values but I don't have any idea. I could search using a single value but I want to do with multiple values (AND operation).

LARAVEL

api.php:

Route::get('/project/search/{request}', [ProjectController::class, 'search']);

ProjectController.php:

public function search($request)
{
    if ($request==='business_divition') {
        return Project::where('business_divition', 'like', '%Business%')->get();
    }

    if ($request==='rank') {
        return Project::where('rank', 'like', '%rank%')->get();
    }
    
    //Single value search
    //return Project::where('rank', 'like', '%' .$request. '%')->get();
}

Angular

data.service.ts:

searchProjectData(data: any) {
    return this.httpClient.get('http://127.0.0.1:8000/api/project/search',data);
}

itemlist.component.ts:

search() {
    this.dataService.searchProjectData(this.projects).subscribe(res => {
      this.projects = res; //right now 'res' value display as *null*
    })
}

itemlist.component.html:

<p-dropdown [options]="rankArr" name="rank" [(ngModel)]="project.rank" optionLabel="rank" optionValue="rank"></p-dropdown>
<p-dropdown [options]="divitionArr" name="business_divition" [(ngModel)]="project.business_divition" optionLabel="divition" optionValue="divition"></p-dropdown>

<button (click)="search()" type="button"></button>

I think itemlist.component.ts file search() method is wrong!

Answer 1

Your url doesn't look like the one in server side. This function will work. I used a dynamic url to fit all your cases.

searchProjectData (data: string) { 
let url = "http://127.0.0.1:8000/api/project/search/" + data;
return this.httpClient.get(url);
 }