Implementing Angular 4 to fetch information from a JSON file

Question

Implementing Angular 4 to fetch information from a JSON file

As a beginner in Angular, my current task involves loading data from a JSON file upon click, which I have successfully achieved so far.

However, I am facing an issue where I'm unable to load the first JSON object before clicking, meaning that I want the first object to be loaded when the page initially 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

Answer 1

Answer №1

Make sure to load the JSON data in the ngOnInit() function of your Angular component.

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

Additionally, use ngIf to ensure that your records are only displayed after the 'people' data has been 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>

Answer 2

Make sure to load the JSON data in the ngOnInit() function of your Angular component.

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

Additionally, use ngIf to ensure that your records are only displayed after the 'people' data has been 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>

Answer 3

Answer №2

It's important to ensure that your page loads quickly, especially in comparison to the response time from your API. One way to do this is by setting up your subscription inside the response function so you can be sure it has received the data.

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 specific implementation, you may want to consider adding a conditional check within the setThis function to ensure the people array is not empty before proceeding.

Another approach would be to update your HTML structure as follows:

<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>

Make sure to change currentStatus into a number and set its default value to 0. This adjustment allows for immediate updating of the HTML when there is at least one person in the array. To hide the currentStatus section, simply set it to -1. The use of '?' before accessing 'name' and 'img' ensures that the HTML checks if the object exists before displaying those values.

Answer 4

It's important to ensure that your page loads quickly, especially in comparison to the response time from your API. One way to do this is by setting up your subscription inside the response function so you can be sure it has received the data.

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 specific implementation, you may want to consider adding a conditional check within the setThis function to ensure the people array is not empty before proceeding.

Another approach would be to update your HTML structure as follows:

<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>

Make sure to change currentStatus into a number and set its default value to 0. This adjustment allows for immediate updating of the HTML when there is at least one person in the array. To hide the currentStatus section, simply set it to -1. The use of '?' before accessing 'name' and 'img' ensures that the HTML checks if the object exists before displaying those values.

Answer 5

Answer №3

Here is a suggestion for you:

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

ngAfterViewInit(){        
    this.displayData(this.data[0]);
}

Answer 6

Here is a suggestion for you:

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

ngAfterViewInit(){        
    this.displayData(this.data[0]);
}

Implementing Angular 4 to fetch information from a JSON file

Answer №1

Answer №2

Answer №3

Similar questions

Discover the combined type of values from a const enum in Typescript

Troubleshooting Angular MIME problems with Microsoft Edge

Utilize JSON data to dynamically populate TextFields or Select menus depending on a specific key in the JSON object

Automate your Excel tasks with Office Scripts: Calculate the total of values in a column depending on the criteria in another column

Using AngularJS, I can bind the ng-model directive to asynchronously update and retrieve data from

"Effortless Auto-complete with Linked Content and Visuals

What type of HTML tag does the MUI Autocomplete represent?

Error encountered: "Instance variable for Apex chart not defined while attempting to update charts with updateOptions."

JavaScript Animation of Text

Generate listview items containing anchor tags automatically

Can CSS be used to automatically focus on a div element?

Tips for sending the image file path to a React component

Optimizing Wordpress by Efficiently Enqueueing Javascript

Attempting to compare the HTML datetime with the current time in order to implement conditional formatting

Retrieve the total count of tables within a specific div element

What is the procedure for modifying the height of a button in HTML?

Node server quickly sends a response to an asynchronous client request

Utilizing Angular 14 and Typescript to fetch JSON data through the URL property in an HTML

Issue encountered while managing login error messages: http://localhost:3000/auth/login net::ERR_ABORTED 405 (Method Not Allowed)

Issue with Bootstrap.js causing mobile menu to not expand when toggled in Rails app