My *ngFor in my ionic list is broken (ionic 5, Angular 9)

Question

trying to pull data from my db.json file and then have it populate a list. When I was just console logging the data when the page loaded it worked fine, but now I get this error:

Error trying to diff '[object Object]'. Only arrays and iterables are allowed

I thought I was using the jobs array from my .ts file but apparently not, code is below:

pertinent html (the job. in the double curly braces doesn't autocomplete to anything from my interface)

 <ion-list inset="true">
    <ion-item *ngFor="let job of jobs"> {{job.type}} </ion-item> 

search-jobs.page.ts

import { JobService } from './../../services/job.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-search-jobs',
  templateUrl: './search-jobs.page.html',
  styleUrls: ['./search-jobs.page.scss'],
  providers: [JobService]
})
export class SearchJobsPage implements OnInit {

    public jobs = [];
  constructor(private jobService: JobService) {

   }

  claim(){
    console.log("claimed");
  }

  ngOnInit() {
    this.jobService.getLocalData().subscribe(data => this.jobs = data); 




  }

}

job.service.ts

import { Observable } from 'rxjs';
import { Job } from './../models/job';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class JobService {
  private url: string = "/assets/data/db.json";
  constructor(private http: HttpClient) { }

  getLocalData(): Observable<Job[]> {
    return this.http.get<Job[]>(this.url);
  }
}

job.ts (my interface)

    jobId: number;
    seekerId: number;
    providerId: number;
    type: string;
    city: string;
    address: string;
    estimate: number;
    duration: string;
    description: string; 
    completed: boolean;
}

Answer 1

I think that you got the json string object from the subscription. try to console it. If it is than convert into json array.