I am currently working on implementing a cascading dropdown feature where selecting a state will display the areas within that state. The issue I'm facing is that all the data is stored in the same table in the database.
Here is an overview of the database structure:
States:
{id: 2526, code: 's_abuja', label: 'Abuja', descr: '', category: 'state'}
{id: 2527, code: 's_anambra', label: 'Anambra', descr: '', category: 'state'}
{id: 2528, code: 's_enugu', label: 'Enugu', descr: '', category: 'state'}
{id: 2529, code: 's_akwa_ibom', label: 'Akwa Ibom', descr: '', category: 'state'}Areas:
{id: 1377, code: 's_abia_1', label: 'Aba North',descr:'',category:'local_government_area'}
{id: 1378, code: 's_abia_2', label: 'Aba South', descr: '', category: 'local_government_area'}
{id: 1394, code: 's_abuja_1', label: 'Abaji', descr: '', category: 'local_government_area'}
{id: 1395, code: 's_abuja_2', label: 'Bwari', descr: '', category: 'local_government_area'}In my Angular application, I've incorporated this logic into the select tag:
<select
class="form-control"
id="field_civilState"
name="civilState"
formControlName="civilState"
(change)="onChange($event.target.value)"
>.ts file
import { IDictionary } from '/model/dictionary.model';
civilStates: IDictionary[];
lgas: IDictionary[];
ngOnInit(){
this.lgas = this.civilStates.filter(x => x.category === 1)[0].category;
}
onChange(dataValue) {
this.lgas = this.civilStates.filter(x => x.category === dataValue)[0];
}I would appreciate any assistance in resolving this challenge.