I'm a newbie in Angular. What i'm doing is loading data from json file on click, which so far i have done correctly.
But the point where im stuck is to load the first json object before click, i.e to load the first object when the page loads
Typescript
export class RequestComponent{
people: Object[];
constructor(http:Http){
http.get('data.json').subscribe(res => {
this.people = res.json();
});
}
public currentStatus;
public setThis = (people) => this.currentStatus = people;
}
Html
<ul class="col-md-4">
<li *ngFor="let person of people" (click)="setThis(person)">
<span><i class="fa fa-cog" aria-hidden="true"></i></span>
<p>{{ person.name }}</p>
</li>
</ul>
<div *ngIf="currentStatus" class="col-md-8 right-section">
<h2>{{ currentStatus.name }}</h2>
<img [src]="currentStatus.img" class="img-responsive"/>
</div>
Try loading json in ngOnInit() function.
import { Component, OnInit } from '@angular/core';
// other imports
export class RequestComponent implements ngOnInit{
people: Object[];
constructor(private http:Http){}
ngOnInit(){
this.http.get('data.json').subscribe(res => {
this.people = res.json();
});
}
}
And adding ngIf for displaying your records, so it doesn't try to display it before people are loaded.
<ul *ngIf="people" class="col-md-4">
<li *ngFor="let person of people" (click)="setThis(person)">
<span><i class="fa fa-cog" aria-hidden="true"></i></span>
<p>{{ person.name }}</p>
</li>
</ul>
<div *ngIf="currentStatus" class="col-md-8 right-section">
<h2>{{ currentStatus.name }}</h2>
<img [src]="currentStatus.img" class="img-responsive" />
</div>
Your page will usually load faster than it can get a response form your API, as such you should be setting people inside of the subscribe, after you get the response, so you can be certain it has received it.
constructor(private http:Http){
this.http.get('data.json').subscribe(res => {
this.people = res.json();
if(this.people && this.people.length>0)
this.setThis(this.people[0]);
});
}
Depending on your implementation, it may be more appropriate to do the if to ensure that the people array isn't empty inside of setThis.
Alternatively, you could change your html to be like so
<ul class="col-md-4">
<li *ngFor="let person of people" (click)="setThis(person)">
<span><i class="fa fa-cog" aria-hidden="true"></i></span>
<p>{{ person.name }}</p>
</li>
</ul>
<div *ngIf="currentStatus>-1" class="col-md-8 right-section">
<h2>{{ people[currentStatus]?.name }}</h2>
<img [src]="people[currentStatus]?.img" class="img-responsive"/>
</div>
Change currentStatus to a number and default it to 0. This would allow you to circumvent the problem of assigning currentStatus to the first person, as soon as there was a person the html would update. If you ever needed to disable the display of the currentStatus part, just set it to -1.
The ? before the .name and .img tells the html to verify the object exists before trying to access the name or img, if it doesn't exist it doesn't show that part.
Try this:
constructor(private http:Http){
this.http.get('data.json').subscribe(res => {
this.people = res.json();
});
}
ngAfterViewInit(){
this.setThis(this.people[0]);
}