javascript - Angular4: Load data from Json - Stack Overflow

admin管理员组

文章数量:1410737

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>

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>

• javascript
• angular
• typescript

Share Improve this question Follow edited Feb 8, 2019 at 21:27 user513951 13.9k88 gold badges7070 silver badges8989 bronze badges asked Apr 28, 2017 at 21:06 dev254dev254 11711 gold badge22 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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]);
}

本文标签： javascriptAngular4 Load data from JsonStack Overflow