Angular 2 - fetching data from local json to populate dropdown
I have created an Angular 2 service that reads local json using http (might later be a call to rest service) and returns an Observable.
@Injectable()
export class WorkflowDataService {
constructor(private http: Http) { }
getProcessTemplates(): Observable<Response> {
return this.http.get("/assets/jsons/process-templates.json");
}}
the readable json looks like this:
{
"process-templates": [
{
"name": "ABC",
"desc": "ABC"
},
{
"name": "XYZ",
"desc": "XYZ"
},
{
"name": "PQR",
"desc": "PQR"
}
]
}
My goal is to show the values of the name attributes in the dropdown. So, the dropdown menu should have - ABC, XYZ, PQR.
So, in my component, I am calling this service -
processTemplates: Observable<Response>;
ngOnInit( ) {
this.workflowDataService.getProcessTemplates()
.subscribe(function(response) {
this.processTemplates = response.json();
console.log(this.processTemplates);
});
}
In console.log I see the below output
how can i get the result in a format that can be displayed in the dropdown
<select class="form-control dropdown" (ngModel)="processTemplate"
name="processTemplate" id="processTemplate" required>
<option *ngFor="let processTemplate of processTemplates">
{{ processTemplate.name }}
</option>
</select>
source to share
Your JSON contains an array inside an object, so you need to extract an array from an object process-templates
. Made other changes function
too , instead of strong arrow syntax instead , so you won't lose context this
:)
selectedT: any; getProcessTemplates(): Observable<Response> { return this.http.get("/assets/jsons/process-templates.json") // extract array from process-templates object .map(res => res.json().process-templates) }}
Then, in your component, sign:
this.workflowDataService.getProcessTemplates() .subscribe(data => { this.processTemplates = data; console.log(this.processTemplates); });
And for your template, do as John said:
<select [(ngModel)]="selectedTemplate"> <option *ngFor="let processTemplate of processTemplates">{{processTemplate.name}}</option> </select>
source to share
From a similar question: Linking select element for object in Angular 2
<select [(ngModel)]="selectedTemplate"> // use banana in a box syntax:[()]
<option *ngFor="let processTemplate of processTemplates" [ngValue]="processTemplate">{{processTemplate.name}}</option>
</select>
Besides. You have different possibilities for this method inside the init method. This will help solve Chaning for the lambda function. And as @ AJT_82 mention, extract the object inside your json
ngOnInit( ) {
this.workflowDataService.getProcessTemplates()
.subscribe(response => { //removed function, added =>
this.processTemplates = response.json().process-templates; //extract json
console.log(this.processTemplates);
});
}
source to share