How can I select data from multiple JSON files and relate them?

Question

I have a project in Angular11 in which I have included two JSON files, one with the provinces and the other with the municipalities, both files related by the Id, (the Id of the provinces is concatenated to each of their municipalities). I have created a form to select the province and depending on the chosen province, select one of the corresponding municipalities. I can select the province without problems, but I cannot show the municipalities.

This is my component.html:

<ng-container>
    <div class="formAdd">
        <div fxLayout="row wrap" fxLayoutGap="10px">
            <mat-form-field fxFlex="20">
                <mat-label>Province</mat-label>
                <mat-select>
                    <mat-option *ngFor="let op of provinceArray;">
                        {{ op.nm }}
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <mat-form-field fxFlex="20">
                <mat-label>Municipality</mat-label>
                <mat-select>
                    <mat-option>
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
    </div>
</ng-container>

This is my component.ts:

import municipalityArray from "../municipality.json";
import provinceArray from "../province.json";

export class SidenavAutosizeExample {
  selectedProvince = provinceArray[0];
  provinceArray = provinceArray;

  constructor() {}
}

This is my province.json:

{
    "id": "24",
    "nm": "León"
},
{
    "id": "34",
    "nm": "Palencia"
}

This is my municipality.json:

{
    "id": "24007",
    "nm": "Arganza"
}, {
    "id": "24008",
    "nm": "Astorga"
}, {
    "id": "24009",
    "nm": "Balboa"
}, {
    "id": "24010",
    "nm": "Bañeza, La"
}, {
    "id": "34001",
    "nm": "Abarca de Campos"
}, {
    "id": "34003",
    "nm": "Abia de las Torres"
}, {
    "id": "34004",
    "nm": "Aguilar de Campoo"
}, {
    "id": "34005",
    "nm": "Alar del Rey"
}

My problem: When I select a province I need the list of municipalities related to the selected province to be shown in the select of municipalities.

Each province has an ID (Leon - 24) and each municipality concatenates the ID of the province to which it belongs (Arganza - 24007).

You would need to collect the Id of the selected province, search the JSON for all the municipalities that start with that Id and show them in the select. Does anyone know how I can do this?

I have the following example code with both JSON files: https://stackblitz.com/edit/material-sidenav-example-4zr4yq?file=municipality.json

Answer 1

You can see a work example here. Stackblitz link

1. make sure to have a clean json files: in my example I put the 2 lists in one single file.

2. Make a service (api.service.ts) to get all lists with observables and a helper to parse json data.

    const fromJson = data => JSON.parse(JSON.stringify(data));

3. Init your component form with a FormGroup in the axample I use FormBuilder to init formGroup.

4. get data for provinces with the api service

5. make an update method for municipalities list with params province id

6. use selectionChange of mat-select to update and get municipalities list data, I add a prId in the model of the province to match filter.