Lately, I've been investing a significant amount of time attempting to apply interfaces to the JSON response received from the API. Surprisingly, it works perfectly fine in the browser after compilation, but my IDE, VS Code, keeps throwing this error at me: "Identifier 'title' is not defined. 'RoomItem[]' does not contain such a member." It's frustrating because despite displaying the elements correctly, VS Code insists on underlining the data properties in red. To add to my woes, my terminal also throws a warning my way.
WARNING in AngularCompilerPlugin: Forked Type Checker exited unexpectedly. Falling back to type checking on main thread.
If anyone out there could lend a hand, I would deeply appreciate it - have a wonderful day, fellow developers!
// JSON Response
area: "21 - 28 m²"
day_price_flex: "1647.00"
day_price_normal: "1318.00"
description: "Our beautiful superior rooms offer more space for relaxation after a long day on holiday. Watch a movie on the TV or enjoy some downtime in the bathtub."
facilities: (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
id: "2"
images: [{…}]
num_facilities: 12
num_images: 1
num_persons: "2"
title: "Superior"
// Facilities
facilities: Array(12)
0: {id: "1", title: "Electric kettle with coffee/tea", category: "General equipment"}
1: {id: "2", title: "Free WiFi", category: "General equipment"}
2: {id: "3", title: "Hairdryer", category: "General equipment"}
3: {id: "4", title: "Non-smoking", category: "General equipment"}
4: {id: "5", title: "Air cooling", category: "General equipment"}
5: {id: "6", title: "Minibar", category: "General equipment"}
6: {id: "7", title: "Blackout curtains", category: "General equipment"}
7: {id: "8", title: "Safe", category: "General equipment"}
8: {id: "9", title: "Iron and ironing board", category: "General equipment"}
9: {id: "10", title: "French balcony (available in some rooms)", category: "General equipment"}
10: {id: "25", title: "Two separate single beds", category: "Beds"}
11: {id: "26", title: "King-size bed", category: "Beds"}
// Images
0: {id: "75", title: "Superior Sleeping Space ©", image: "/images/room-superior-bedroom.jpg"}
// HTML / View
<section *ngIf="http.data | async as data">
<article>
<h2>{{data.title}}</h2>
<h5>{{data.area}}</h5>
<p>{{data.description}}</p>
</article>
</section>
// http.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError, shareReplay } from 'rxjs/operators';
interface Facilities {
id?: string;
title?: string;
category?: string;
}
interface Images {
id?: string;
title?: string;
image?: string;
}
interface RoomItem {
id: string;
title: string;
description: string;
num_persons: string;
area: string;
day_price_normal: string;
day_price_flex: string;
num_images: number;
images?: Images[];
num_facilities: number;
facilities?: Facilities[];
}
interface Response {
status: boolean;
error: string;
item?: RoomItem[];
items?: RoomItem[];
}
const CACHE_SIZE = 1;
@Injectable({
providedIn: 'root'
})
export class HttpService {
private cache$: Observable<RoomItem[]>;
constructor(private http: HttpClient) {}
get data() {
if (!this.cache$) {
this.cache$ = this.requestRoom(2).pipe(shareReplay(CACHE_SIZE));
}
return this.cache$;
}
private requestRoom(id) {
return this.http.get<Response>(`https://api.mediehuset.net/overlook/rooms/${id}`).pipe(
map(response => response.item ? response.item : response.items)
);
}
}
Despite my attempts to remove the array part of my type, I faced compilation issues because I use a map operator on it - which wouldn't be feasible without an array. Changing my cache observable to exclude the array ("Observable<RoomItem>") didn't work either - leading me to adjust the Response interface accordingly, but still no success.
// If i change my cache observable to not having it:
Observable<RoomItem>
// I had to change it in my Response type as well..
interface Response {
status: boolean;
error: string;
item?: RoomItem;
items?: RoomItem;
}
// I actually also tried with RoomItem<Object>, with compilation success but no results on the functioning part of it.
This entire ordeal left me questioning what to do next. While my code may trigger red underlines in my IDE, it still compiles successfully and functions properly by displaying the items. Perhaps creating individual files for the interfaces to import them into their respective locations would streamline the process moving forward.