Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

236
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda