This was answered below:
I've been having trouble rendering the API results from a simple fake JSON. The JSON is at this endpoint: https://testapi.io/api/crimsonsunset/code-challenge-jobs
My service.ts
looks like this:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(private http: HttpClient) { }
getJobs() {
return this.http.get('https://testapi.io/api/crimsonsunset/code-challenge-jobs')
}
}
My home.component.ts
looks like this:
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../services/api.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
jobs: Object;
constructor(private data: ApiService) { }
ngOnInit() {
this.data.getJobs().subscribe(data => {
this.jobs = data
console.log(this.jobs)
})
}
}
My home.component.html
looks like this:
<div class="bg">
<h1 class="header">Welcome to your next big role</h1>
<app-search></app-search>
<div style="padding: 20px;">
<mat-card *ngFor="let job of jobs.data" style="margin-top:10px;">
<mat-card-header>
<mat-card-title >The role: {{job.title}}</mat-card-title>
<mat-card-subtitle>{{job.city}} , {{job.state}}
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<mat-accordion>
<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
<mat-expansion-panel-header>
<mat-panel-description>
Full Description:
</mat-panel-description>
</mat-expansion-panel-header>
<p>Info from JSON</p>
</mat-expansion-panel>
</mat-accordion>
</mat-card-content>
</mat-card>
</div>
</div>
I feel as though I'm just making a simple syntax error to render the data. It's console.log
ging everything correctly. It seems as though it's not seeing where data
is in jobs.data
on the HTML file.