While working on creating filters with 3 categories, I came up with a Model:
export class filtersApplied {
public subjects: string[] = [];
public price: string[] = [];
public ratings: number[] = [];
}
Whenever a user applies filters from any of these categories, I want the chosen values to be added into their respective arrays in the model. For example, if I select "ENGLISH", "MATHEMATICS", and "SCIENCE", I would like them to be inserted into the "filtersApplied.subjects" array for processing at the backend.
allFiltersApplied is a variable of type filtersApplied.
allFiltersApplied: filtersApplied;
<ul class="filter-category-list">
<li>
<label class="filters-label">
<input
type="checkbox"
class="filter-input"
value="English"
(change)="searchBySubject($event)"
/>English
<span class="filter-num">(123)</span>
</label>
</li>
<!-- more list items -->
</ul>
This is the function in my TypeScript file:
searchBySubject($event) {
var subject = $event.target.value;
console.log(subject); //1
console.log(this.allFiltersApplied); //2
console.log(this.allFiltersApplied.subjects); //3
}
The output I received for console.log(this.allFiltersApplied) is undefined; The output I received for console.log(this.allFiltersApplied.subjects) is Cannot read property 'subjects' of undefined at SearchResultsComponent.searchBySubject;
**I Have Some Questions:**
1. Why is it displaying undefined?
2. Why can't it read subjects when they are already defined? I am unable to push any value such as this.allFiltersApplied.subjects.push("ENGLISH");
I Request Your Assistance on this matter, as I am unclear about the behavior exhibited.