I encountered an error in
homes.component.html
while trying to run my Angular project to showcase a list of homes from a JSON file.
https://i.stack.imgur.com/D0vLQ.jpg
Json File
[
{
"image_url": "https://images.unsplash.com/photo-1460317442991-0ec209397118?auto=format&fit=crop&w=500&q=80",
"type": "Apartment",
"location": "New York",
"title": "Superb duplex apartment in the historical centre"
},
...
{
"image_url": "https://images.unsplash.com/photo-1460317442991-0ec209397118?auto=format&fit=crop&w=500&q=80",
"type": "Apartment",
"location": "New York",
"title": "Rustic Apartment in Downtown"
}
]
homes.component.html
<div class="uk-container uk-padding">
<h1>Homes</h1>
<div *ngFor="let home of homes$ | async">
<div class="uk-card">
...
</div>
data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private httpClient: HttpClient) { }
getHomes() {
return this.httpClient.get('assets/homes.json');
}
}
homes.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-homes',
templateUrl: './homes.component.html'
})
export class HomesComponent implements OnInit {
homes$ = this.dataService.getHomes();
constructor(private dataService: DataService) { }
ngOnInit() {
}
}
The intention is to present a collection of homes from a JSON file complete with images and corresponding descriptions.