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

Resolve the conflict with the upstream dependency in Angular

What is the process to activate a function within a component once a service method has been run?

I am encountering an issue with retrieving JSON data within an ngrx effect

Is there a way to update the parent state from a child component in React when using Switch Route?

Running into issues with TypeScript in conjunction with Redux-Form and React-Redux connect

Unable to retrieve data following a promise in Ionic 3

Issue encountered while attempting to utilize the useRef function on a webpage

Function input custom operator in RxJs

Leveraging Angular 4 for efficient integration and application of d3 and d3-cloud libraries along with their corresponding typings

The loading of npm installed Firebase in Angular4 is not successful

The request body doesn't meet the interface requirements, but it does not trigger an error response

Jasmine: utilizing unit test to spy on the invocation of a nested function

Separate configurations for Webpack (Client and Server) to run an Express app without serving HTML files

angular 2 : Unable to locate the variable named 'Response'

Eliminate the routerLinkActive attribute that assigns two classes when the user switches to a different menu

Fixed headers remain in place as you scroll horizontally on a single table

Styling multiple checkbox items in an Angular Material Autocomplete

Issues with Angular2 causing function to not run as expected

Issue [ERR_MODULE_NOT_FOUND]: The module 'buildapp' could not be located within buildserver.js

Implementing Authorization keys in Angular's Swagger UI using code