This my opportunity
object which is a part of my angular app.component.ts
file. In my template(HTML of this component) I want to loop out different skills
backgrounds
nationalities
etc. array using *ngFor*
. So I've filtered out these array of objects based on a property option
which can have only 2 values either preferred
or required
. I've implemented such logic inside my TS file using filterByProperty()
function as shown below. Please help make this function more simplified and generalized.
opportunity: any = {
"id": 526,
"title": "Testing",
"nationalities": [
{
"option": "preferred",
"id": 479,
"name": "India",
}
],
"skills": [
{
"option": "required",
"id": 1153,
"name": "Adobe Lightroom",
},
{
"option": "preferred",
"id": 77,
"name": "Python",
},
{
"option": "preferred",
"id": 78,
"name": "Ajax",
},
{
"option": "required",
"id": 147,
"name": "3D Max",
},
{
"option": "preferred",
"id": 175,
"name": "Aircraft Engine Technology",
}
],
"backgrounds": [
{
"option": "preferred",
"id": 232,
"name": "Biology",
},
{
"option": "required",
"id": 249,
"name": "International relations",
}
],
"languages": [
{
"option": "required",
"id": 18,
"name": "English",
},
{
"option": "preferred",
"id": 31,
"name": "Italian",
}
]
}
My app.component.ts
file
import {Component, OnInit, ViewChild} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
opportunity: any = {}; // Object value is shown above
backgrounds: any = {
preferred: [],
required: []
};
skills: any = {
preferred: [],
required: []
};
languages: any = {
preferred: [],
required: []
};
nationalities: any = {
preferred: [],
required: []
};
ngOnInit() {
this.filterByProperty();
}
filterByProperty() {
this.skills.preferred = this.opportunity.skills.filter((i) => i.option === 'preferred');
this.skills.required = this.opportunity.skills.filter((i) => i.option === 'required');
this.backgrounds.preferred = this.opportunity.backgrounds.filter((i) => i.option === 'preferred');
this.backgrounds.required = this.opportunity.backgrounds.filter((i) => i.option === 'required');
this.languages.preferred = this.opportunity.languages.filter((i) => i.option === 'preferred');
this.languages.required = this.opportunity.languages.filter((i) => i.option === 'required');
this.nationalities.preferred = this.opportunity.nationalities.filter((i) => i.option === 'preferred');
this.nationalities.required = this.opportunity.nationalities.filter((i) => i.option === 'required');
}
}
opportunities
once by iterating over its keys? \$\endgroup\$ – Sumurai8 Apr 29 '18 at 11:14