My goal is to show the nearest store based on a specific location. To achieve this, I have implemented 2 dropdowns - one for selecting the location (states) and the other for displaying the nearest store (tenants). There are a total of 6 locations and only 2 stores available. https://i.sstatic.net/HaDsk.png https://i.sstatic.net/w1OCo.png
Within the .ts file, I first retrieve all the active stores (tenants)
getAllTenants() {
this._tenantService.getTenantsForPublic(undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,999,undefined).subscribe((data) => {
this.tenants = data.items.filter((item) => item.isActive);
})
}
Next, I retrieve all the locations (states)
getAllStates() {
this._stateProxy.getAll().subscribe((result) => {
this.governorates = result.items;
console.log('states', this.governorates);
});
}
Within my .html file, I have set up two dropdown menus
//first dropdown <p-dropdown #governorateDropdown [showClear]="true" [filter]="true" filterBy="name" placeholder="Governorate" [ngModel]="selectedStateId" (onChange)="updateStore($event)" formControlName="governorate" [options]="governorates" optionLabel="name" optionValue="id"></p-dropdown>
//second dropdown
<p-dropdown [options]="tenants" [filter]="true" filterBy="name" name="tenants" [(ngModel)]="selectedTenantId" placeholder="Select Your Nearest Area" optionLabel="name" optionValue="id" [showClear]="true"></p-dropdown>
Currently, I'm stuck on how to filter store values (tenant id) based on the selected location (state id) in the following function
updateStore(event : any) {
if (this.selectedStateId == 12) {
this.tenants.filter((value) => value.id == event.value)
}
}