Generate md-card components in real-time using data fetched from an API

Question

Generate md-card components in real-time using data fetched from an API

I have a scenario where I make an API call to fetch user profiles, and I want to generate Angular Material Design md-cards dynamically for each profile. The number of profiles retrieved can vary, hence the need for dynamic card creation.

Below is the component file responsible for making the JSONP request and storing the profiles in the profiles variable:

import {Component, Injectable, OnInit} from '@angular/core';
import {Jsonp} from '@angular/http';

@Component({
  selector: 'app-staff',
  templateUrl: './staff.component.html',
  styleUrls: ['./staff.component.css']
})
@Injectable()
export class StaffComponent implements OnInit {
  public searchField: string;
  apiUrl = 'this/is/my/api/url';
  public results: JSON;
  public profiles;

  constructor(private jsonp: Jsonp) {
  }

  ngOnInit() {
  }

  setSearchField(field: string){ // ignore this method
    this.searchField = field;
    console.log('Received field: ' + this.searchField);
  }

  search(term: string) {
    const apiUrl = `${this.apiUrl}?search=${term}&rows=10&callback=JSONP_CALLBACK`;
    return this.jsonp.request(apiUrl).map(results => { this.results = results.json(); console.log(this.results['profiles'][0]); this.profiles = results['profiles']; return results.json(); });
  }

}

This is the template section pertaining to the above component, where I attempt to use *ngFor to create a list of md-card:

<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-md-auto">
      <ul>
        <li *ngFor="let profile of profiles">
          <md-card class="example-card">
            <md-card-header>
              <div md-card-avatar class="example-header-image"></div>
              <md-card-title>{{profile.fullName}}</md-card-title>
              <md-card-subtitle>Department</md-card-subtitle>
            </md-card-header>
            <img md-card-image src="../assets/image.png">
            <md-card-content>
              <p>
                This section of the card will contain information about the result being searched for. It could also be
                accompanied by additional information such as links.
              </p>
            </md-card-content>
            <md-card-actions>
              <button md-button>APPLY</button>
              <button md-button>GO TO xyz</button>
            </md-card-actions>
          </md-card>
        </li>
      </ul>
    </div>
  </div>
</div>

The profile data is stored in an array format (assuming a maximum length of 10) with the following structure:

0: {fullName: "Foo Bar", emailAddress: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8ded7d7dad9caf8ded7d7dad9ca96dbd7d5">[email protected]</a>", image: "/profile/image/foobar/foobar.jpg", phoneNumber: "99999999"},

1: {fullName: "Foo Bar1", emailAddress: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abcdc4c4c9cad99aebcdc4c4c9cad985c8c4c6">[email protected]</a>", image: "/profile/image/foobar1/foobar1.jpg", phoneNumber: "919999999"}

Despite having confirmed that profiles is not empty, the md-cards are not rendering. How do I proceed to dynamically generate cards based on the number of profiles and populate them with values from the profile objects?

angular typescript angular-material

Answer 1

Answer №1

If you want to update profiles dynamically in Angular, consider using a BehaviorSubject from rxjs and emitting the profiles from the response. Utilize the async pipe in your template to ensure that Angular's change detection captures the updates.

private readonly profiles$$ = new BehaviorSubject([]);
public readonly profiles$ = this.profiles$$.asObservable();

//  ...

search(term: string) {
  const apiUrl = `${this.apiRoot}?search=${term}&rows=10&callback=JSONP_CALLBACK`;
  return this.jsonp.request(apiUrl).map(res => {
    let results = res.json();
    this.profiles$$.next(results.profiles);
    return results;
  });
}

In your template:

<li *ngFor="let profile of profiles$ | async">
  <!--  ... -->
</li>

By the way, remember to remove the @Injectable decorator from the component as components should not be injectable.

Additionally, it is advisable to move the API call into a shared service for cleaner component logic that can be reused across other components. You may also want to explore the redux pattern by looking into @ngrx/store and @ngrx/effects for better state management and control over data handling with external APIs. More information can be found at the @ngrx/platform monorepo on GitHub.

Answer 2

If you want to update profiles dynamically in Angular, consider using a BehaviorSubject from rxjs and emitting the profiles from the response. Utilize the async pipe in your template to ensure that Angular's change detection captures the updates.

private readonly profiles$$ = new BehaviorSubject([]);
public readonly profiles$ = this.profiles$$.asObservable();

//  ...

search(term: string) {
  const apiUrl = `${this.apiRoot}?search=${term}&rows=10&callback=JSONP_CALLBACK`;
  return this.jsonp.request(apiUrl).map(res => {
    let results = res.json();
    this.profiles$$.next(results.profiles);
    return results;
  });
}

In your template:

<li *ngFor="let profile of profiles$ | async">
  <!--  ... -->
</li>

By the way, remember to remove the @Injectable decorator from the component as components should not be injectable.

Additionally, it is advisable to move the API call into a shared service for cleaner component logic that can be reused across other components. You may also want to explore the redux pattern by looking into @ngrx/store and @ngrx/effects for better state management and control over data handling with external APIs. More information can be found at the @ngrx/platform monorepo on GitHub.

Answer 3

Answer №2

Your query result is transformed into a map() and still provides Observable or promise. Therefore, it is essential to manage the asynchronous nature of the data received from the server.

Angular offers an async pipe that can be utilized in your template to indicate that whenever the data arrives, update my UI accordingly.

You can relocate your server request to an @Injectable() service that will return an Observable. Subsequently, store this Observable in your component variable and utilize the async pipe in your UI.

<ul>
    <li *ngFor="let profile of profiles | async">
      <md-card class="example-card">
        <md-card-header>

This approach works seamlessly with Observables and http calls in Angular API. As Angular loads, it completes the template binding before receiving data from the server, causing a delay in updating the UI. Handling this asynchronous behavior is crucial for proper functionality. Hope this explanation clarifies things for you :)

Answer 4

Your query result is transformed into a map() and still provides Observable or promise. Therefore, it is essential to manage the asynchronous nature of the data received from the server.

Angular offers an async pipe that can be utilized in your template to indicate that whenever the data arrives, update my UI accordingly.

You can relocate your server request to an @Injectable() service that will return an Observable. Subsequently, store this Observable in your component variable and utilize the async pipe in your UI.

<ul>
    <li *ngFor="let profile of profiles | async">
      <md-card class="example-card">
        <md-card-header>

This approach works seamlessly with Observables and http calls in Angular API. As Angular loads, it completes the template binding before receiving data from the server, causing a delay in updating the UI. Handling this asynchronous behavior is crucial for proper functionality. Hope this explanation clarifies things for you :)

Generate md-card components in real-time using data fetched from an API

Answer №1

Answer №2

Similar questions

The service does not fall within the 'rootDir' directory in the Angular secondary module

Highly Transferable Angular Modules for 'ng-cli'

Can you provide any instances of Angular2 projects with intricate routing, specifically with version 2.0.0-rc.1?

Issue with IE11 compatibility in Angular2 (AngularQuickStart version 2.4.0) due to syntax error

Using TypeScript to wrap a class with a Proxy object

Sending real-time data from the tRPC stream API in OpenAI to the React client

Angular 5 is encountering an error with a recursive template, specifically a RangeError stating that the maximum call stack

Is there a way to reveal only the version information from the package.json file in an Angular 17 project?

Implementing experimental decorators and type reconciliation in TypeScript - A step-by-step guide

Setting the value of a custom component property dynamically after the component has been rendered

How to choose a particular Excel spreadsheet in Angular before importing the file?

Creating a regular expression for validating phone numbers with a designated country code

One of the essential components in Angular is currently absent

Having issues with autocompletion in the input element of Angular 7 Material Design

The type 'undefined' cannot be assigned to a different type within the map() function, resulting in a loss of type information

How can I transfer the document id from Angular Firestore to a different component?

Learn how to dynamically enable or disable the add and remove buttons in the PrimeNG PickList using Angular 2

What is the best way to switch routes in redux saga upon successful login?

The conventional method for including React import statements

"Production mode is experiencing a shortage of PrimeNG(Angular) modules, while they are readily accessible in development