How to get Selected item value from a selectBox data - arrays

Question

I have a json file contains objects that have sub-objects like that :
[
{
"index": 0,
"name": "Médecine et spécialités médicales",
"specialties": [
{
"id": 0,
"name": "Médecine interne"
},
{
"id": 1,
"name": "Maladies infectieuses"
},
{
"id": 2,
"name": "Carcinologie médicale"
}
]
},
{
"index": 1,
"name": "Chirurgie et spécialités chirurgicales",
"specialties": [
{
"id": 0,
"name": "Chirurgie générale"
},
{
"id": 1,
"name": "Chirurgie carcinologique"
},
{
"id": 2,
"name": "Chirurgie thoracique"
}
]
}
]
I want to get the value of selected item every time I change the selected data
here is stackblitz that I'm working on, the value of selected item shown as number, how can I get the value as string name field?

Answer 1

According to your stackblitz you passing in value the index not the category name ,
I would do something like this:
app.html:
<ng-template [ngIf]="selectedCategory">
<label for="category">Category</label>
<select
name="category"
id="category"
class="form-control"
(change)="onCategorySelected($event.target.value)"
>
>
<option
*ngFor="let category of categories; index as i;"
[value]="category.name"
>
{{ category.name }}
</option>
</select>
<label for="specialty">Specialties</label>
<select
[(ngModel)]="selectedSpecialty"
name="specialty"
id="specialty"
class="form-control"
(change)="onSpecialtySelected($event.target.value)"
>
<option
*ngFor="let specialty of selectedCategory.specialties;"
[value]="specialty.name"
>
{{ specialty.name }}
</option>
</select>
</ng-template>
I had an ng template to avoid console errors and change the value of the first select tag by category.name and remove ngModel (don't know why this doesn't work sorry).
app.ts:
import { Component, OnInit } from "#angular/core";
import { HttpClient, HttpClientModule } from "#angular/common/http";
interface Speciality{
name: string
}
interface Category{
name: string,
specialities: Speciality[]
}
#Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
categories: Category[];
selectedCategory: Category;
selectedSpecialty: Speciality;
constructor(private http: HttpClient) {
this.http.get<Category[]>("assets/json/data.json").subscribe(res => {
this.categories = res;
this.selectedCategory = this.categories[0]
});
}
onCategorySelected(categoryName: string) {
console.log(categoryName);
this.selectedCategory = this.categories.find(cat => cat.name === categoryName)
}
onSpecialtySelected(value: string) {
console.log(value);
this.selectedSpecialty.name = value;
}
}
I create interface to type your category and specialities, and in the subscribe method add a line to init your selectedCategory with the first object of your categories array.
here is the link to the stackblitz

Answer 2

you can use a getter. that's you create a function
categories: any=[]; //<--initizalize your variable with a empty array
get categoryName()
{
const cat=this.categories.find((_,index)=>index==this.selectedCategory)
return cat?cat.name:null
}
Then each time you write in .html
{{categoryName}} //you see the category selected
And you can forget all yours (change) in select. BTW, remove also the [selected]="i" in your .html. You are using [(ngModel)], so you needn't selected
your forked stackblitz