Child component in Angular displays array as undefined when using parametric route

Question

Child component in Angular displays array as undefined when using parametric route

My goal here is to display a specific property of an item from the jobs array in a child component when navigating to /jobs/:id

Parent Component

export class HomeComponent implements OnInit {

  public jobs!: JobInterface[]

  constructor(
    private jobsService: JobsService
  ) {
  }

  ngOnInit() {
    this.getJobs()
  }


  getJobs(page = 1, filters = {city: 'Rome, Italy', level: ''}): void {
    this.jobsService.getJobs(page, filters)
      .subscribe((response) => {
        this.jobs = response.results.map(job => ({
            id: job.id,
            contents: job.contents,
            name: job.name,
            publication_date: job.publication_date,
            locations: job.locations,
            levels: job.levels,
            company: job.company

          })
        )
      })
  }

}

While the routing works fine, I'm facing an issue in the child component where the jobs array is shown as undefined:

Child component

export class JobDetailsComponent implements OnInit {
  jobId : any
  @Input() jobs! : JobInterface[]
  selectedJob : any
  constructor(private ActivatedRoute : ActivatedRoute) { }

  ngOnInit(): void {
    this.jobId = this.ActivatedRoute.snapshot.paramMap.get('id')
    console.log(this.jobs)
    this.selectedJob = this.jobs.filter(this.jobId)

  }

}

Parent component's HTML

<app-search-bar (OutputFilters)="getFilteredResults($event)" ></app-search-bar>
<app-job-cards [jobs]="jobs"></app-job-cards>
<app-job-details [jobs]="jobs"></app-job-details>

What is the correct way to address this issue? What am I missing in my code?

angular typescript web

Answer 1

Answer №1

Due to the changing route, the absence of jobs or job in the job-details component is noticeable. Components are rendered before data retrieval.

To address this issue, consider implementing a flag to indicate when the data is ready for rendering the component. Move the job-details component to the job-cards component and pass a single job through the router:

Introduce a flag to specify when the data is ready:

export class HomeComponent implements OnInit {
  dataReady:boolean = false;

// Set to true after receiving the response..
this.dataReady = true;

In the template:

<app-job-cards *ngIf="dataReady" [jobs]="jobs"></app-job-cards>

Next steps include:

Removing app-job-details from home-component

Pass the job to the job-details component using the router within the job-cards template:

<a mat-stroked-button routerLink="jobs/{{job.id}}" [state]="job">See More</a>

In the job-details component, access it via the history API:

ngOnInit(): void {
    this.selectedJob = window.history.state;
}

This approach may not be ideal as the direct route might lead to an empty result. Consider storing jobs in the jobs-service instead of the home-component, allowing for shared data between components. Implement methods like getJobs and getJobDetails to manage fetching and processing jobs efficiently.

edit: Sharing Service Data:

Move processing logic from home components to the jobs-service. Create methods that combine fetching and processing, returning jobs as observables. Subscribe to these methods across components to fetch jobs effectively.

Sample implementations:

jobs-service

  getJobs(): Observable<JobInterface[]> {

    if(this.jobs?.length > 0) {
      return of(this.jobs);
    }

    return this.fetchJobs();
  }
    

  fetchJobs(page = 1, filters = { city: 'Rome, Italy', level: '' }): Observable<JobInterface[]> {

    const params = new HttpParams({ encoder: new CustomHttpParamsEncoder() })
      .set('category', 'Science and Engineering')
      .set('page', page)
      .set('location', filters.city)
      .set('level', filters.level)

    return  this.http.get<APIResponseInterface>(this.url, { params })
        .pipe(map(response => {

          this.jobs = response.results.map(job => ({
            id: job.id,
            contents: job.contents,
            name: job.name,
            publication_date: job.publication_date,
            locations: job.locations,
            levels: job.levels,
            company: job.company
          })
          )

          return this.jobs;

        })
    );

  }

home-component

getJobs(): void {

  this.jobsService.getJobs().subscribe((jobs: JobInterface[]) => {

    this.jobs = jobs;
    this.dataReady = true;

  });
}

job-details-component

ngOnInit(): void {

this.jobId = this.ActivatedRoute.snapshot.paramMap.get('id')

this.jobsService.getJobs().subscribe((jobs:JobInterface[]) => {

  this.selectedJob = jobs.find(job=> job.id == this.jobId);
  });
}

The filter method should directly call jobsService.fetchJobs to modify jobs accordingly.

For more information, explore this example on sharing data between components and consider other solutions provided.

Answer 2

Due to the changing route, the absence of jobs or job in the job-details component is noticeable. Components are rendered before data retrieval.

To address this issue, consider implementing a flag to indicate when the data is ready for rendering the component. Move the job-details component to the job-cards component and pass a single job through the router:

Introduce a flag to specify when the data is ready:

export class HomeComponent implements OnInit {
  dataReady:boolean = false;

// Set to true after receiving the response..
this.dataReady = true;

In the template:

<app-job-cards *ngIf="dataReady" [jobs]="jobs"></app-job-cards>

Next steps include:

Removing app-job-details from home-component

Pass the job to the job-details component using the router within the job-cards template:

<a mat-stroked-button routerLink="jobs/{{job.id}}" [state]="job">See More</a>

In the job-details component, access it via the history API:

ngOnInit(): void {
    this.selectedJob = window.history.state;
}

This approach may not be ideal as the direct route might lead to an empty result. Consider storing jobs in the jobs-service instead of the home-component, allowing for shared data between components. Implement methods like getJobs and getJobDetails to manage fetching and processing jobs efficiently.

edit: Sharing Service Data:

Move processing logic from home components to the jobs-service. Create methods that combine fetching and processing, returning jobs as observables. Subscribe to these methods across components to fetch jobs effectively.

Sample implementations:

jobs-service

  getJobs(): Observable<JobInterface[]> {

    if(this.jobs?.length > 0) {
      return of(this.jobs);
    }

    return this.fetchJobs();
  }
    

  fetchJobs(page = 1, filters = { city: 'Rome, Italy', level: '' }): Observable<JobInterface[]> {

    const params = new HttpParams({ encoder: new CustomHttpParamsEncoder() })
      .set('category', 'Science and Engineering')
      .set('page', page)
      .set('location', filters.city)
      .set('level', filters.level)

    return  this.http.get<APIResponseInterface>(this.url, { params })
        .pipe(map(response => {

          this.jobs = response.results.map(job => ({
            id: job.id,
            contents: job.contents,
            name: job.name,
            publication_date: job.publication_date,
            locations: job.locations,
            levels: job.levels,
            company: job.company
          })
          )

          return this.jobs;

        })
    );

  }

home-component

getJobs(): void {

  this.jobsService.getJobs().subscribe((jobs: JobInterface[]) => {

    this.jobs = jobs;
    this.dataReady = true;

  });
}

job-details-component

ngOnInit(): void {

this.jobId = this.ActivatedRoute.snapshot.paramMap.get('id')

this.jobsService.getJobs().subscribe((jobs:JobInterface[]) => {

  this.selectedJob = jobs.find(job=> job.id == this.jobId);
  });
}

The filter method should directly call jobsService.fetchJobs to modify jobs accordingly.

For more information, explore this example on sharing data between components and consider other solutions provided.

Child component in Angular displays array as undefined when using parametric route

Answer №1

Similar questions

Error: The @use directive must come before any other rules in Angular

Effective ways to properly utilize the kendo-switch angular component for seamless rendering of the "checked" state

Incorporating real-time checked checkbox values into a running list

Tips for compacting JSON in Typescript

Struggles with deducing argument types in Typescript

Guide to invoking a REST API endpoint in TypeScript and retrieving the data it returns

Issue with Angular Material: Default selection not being applied in mat-select component

Using Angular 5 for sending HTTP POST requests with x-www-form-urlencoded content-type

Troubleshooting issue of data-binding failure with dynamic component loader in Angular2-universal-started

Tips for synchronizing arrays using the Angular Drag-Drop Component

JavaScript ECMAScript 6 - WARNING: "Decorators can only be applied to a class when exporting"

Displaying dynamic key-value pairs in each row of an Angular mat-table

moving the array generated on the HTML page to a different page

transformed an Angular 2 web application into a sleek and functional mobile application

Ways to prevent Firebase from issuing a warning about my use of the development version

Having trouble halting the execution at specific checkpoints within an asp.net core project containing an angular 8.0 application located in a subfolder named ClientApp

What is the definition of a non-arrow React functional component in TypeScript?

Commit to choosing an option from a dropdown menu using TypeScript

Whenever I attempt to host my Node.js app using the GCP deploy command, it fails to work properly. The error message that appears states: "Module 'express' cannot be found."

Pagination in Firestore with AngularFire2 allows users to query items based on a specified range, utilizing the method .startAfter(lastVisible