How can I resolve the error I am encountering while trying to display array values from an API?
Error
The code snippets are provided below:
joblist.service.ts
import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';
import { IJobs } from '../jobs';
@Injectable({
providedIn: 'root'
})
export class JoblistService {
private _url: any = 'http://13.126.181.94:8087/joblisting.php?action=filter/';
constructor(private http: HttpClient) { }
getjoblists(): Observable<IJobs[]> {
return this.http.get<IJobs[]>(this._url);
}
}
joblist.component.ts
import { Component, OnInit } from '@angular/core';
import { JoblistService } from 'src/app/joblist/joblist.service';
@Component({
selector: 'app-joblist',
template: `
<h2>Job Title</h2>
<ul *ngFor='let joblist of joblists'>
<li>
{{joblist.job_title}} - {{joblist.job_id}} - {{joblist.job_add_date}} -
{{joblist.date_diff}} - {{joblist.role}} - {{joblist.clientname}} -
{{joblist.location}} - {{joblist.experience}} - {{joblist.salary}} -
{{joblist.job_offer_type}} - {{joblist.companies_profiles_name}} -
{{joblist.job_description}} - {{joblist.skill_name}}
</li>
</ul>
`,
styles: []
})
export class JoblistComponent implements OnInit {
public joblists = [];
constructor(public _joblistsService: JoblistService) { }
ngOnInit()
{
this._joblistsService. getjoblists()
.subscribe(data => this.joblists = data);
}
}
jobs.ts
Model for Jobs exported as IJobs
{
job_title: string;
job_id: number;
job_add_date: Date;
date_diff: number;
role: string;
clientname: string;
location: string;
experience: string;
salary: string;
job_offer_type: number;
companies_profiles_name: string;
job_description: string;
skill_name: string;
}