Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

238
Visualizações
Angular4: Load data from Json

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>
over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

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>
over 4 years ago · Santiago Trujillo Relatório

0

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.

over 4 years ago · Santiago Trujillo Relatório

0

Try this:

constructor(private http:Http){
    this.http.get('data.json').subscribe(res => {
        this.people = res.json();
    });
}

ngAfterViewInit(){        
    this.setThis(this.people[0]);
}
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda