How to fetch JSON array object values from api?

Question

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

Error

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

Pardeep Jain · Answer 1 · 2019-02-22T11:13:41.067

1

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.

edited Feb 22 '19 at 11:13

answered Feb 22 '19 at 10:50

Pardeep Jain

84,110
37
165
215

1

@ Pardeep Jain I am reading the value from external api like the above method. api link is: (http://13.126.181.94:8087/job_detail_description.php?job_id=19224&action=filter) Since it is not json array format i am not able to print the values? what is the html syntax to print this values? – Alwin Feb 27 '19 at 11:07
@Alwin For this type of Object data you need to manually Print data using key name either you can iterate over the object using `keyValue` pipe of angular if you want to use indvidual key value pair see here https://stackoverflow.com/a/51491848/5043867 – Pardeep Jain Feb 28 '19 at 04:30

score 0 · Answer 2 · answered Feb 22 '19 at 10:56

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.