CODEWITHSUNDEEP
angulartypescriptapi
Alwin
Alwin

Reputation: 15

How to fetch JSON array object values from api?

I am trying to display the arrry values from api. But i am encountering the following error. How do i fix this error?

Error

Error which i get in console

The codes are as follow:

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

export class 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;

}

In console i am able to get the obj as follows.

enter image description here

Upvotes: 0

Views: 182

Answers (2)

Pardeep Jain
Pardeep Jain

Reputation: 86790

Replace -

<ul *ngFor='let joblist of joblists'>

with

 <ul *ngFor='let joblist of joblists?.all_search_view'>

As you are trying to use *ngFor on the array but you are binding with the object.

Upvotes: 1

Abdu Manas C A
Abdu Manas C A

Reputation: 1149

First of all, in joblist.service.ts

this.http.get<IJobs[]>(this._url);

Since your response is not just IJOBs[] , It should be replaced with the structure of the response body that you are expecting. So when you assign the value in component.ts typescript will automatically show the error for you.

To make it work, you can either change the structure as I've mentioned or as @Pardeep Jain has pointed out. Both will work.

Upvotes: 0

Related Questions