title: Angular4: Load data from Json
body: <p>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.</p>
  
  <p>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</p>
  
  <p><strong>Typescript</strong></p>
  
  <pre><code>export class RequestComponent{
    people: Object[];
    constructor(http:Http){
      http.get('data.json').subscribe(res =&gt; {
        this.people = res.json();
      });
    }
  
    public currentStatus;
    public setThis = (people) =&gt; this.currentStatus = people;
  }
  </code></pre>
  
  <p><strong>Html</strong></p>
  
  <pre><code>  &lt;ul class="col-md-4"&gt;
      &lt;li *ngFor="let person of people" (click)="setThis(person)"&gt;
        &lt;span&gt;&lt;i class="fa fa-cog" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;p&gt;{{ person.name }}&lt;/p&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
     &lt;div *ngIf="currentStatus" class="col-md-8 right-section"&gt;
        &lt;h2&gt;{{ currentStatus.name }}&lt;/h2&gt;
        &lt;img [src]="currentStatus.img" class="img-responsive"/&gt;
     &lt;/div&gt;
  </code></pre>