Imagine having 2 different Objects
Item
_id
itemName
categoryId
Category
_id
categoryName
categoryDescription
With Angular, the goal is to link the categoryId in Item with the corresponding categoryName and categoryDescription, resulting in a final object structured like this.
_id
itemName
categoryId
categoryName
categoryDescription
The category fields could be nested if necessary.
EDIT: Including the relevant code snippets as requested, trimming unnecessary content.
item.ts
export interface Item {
_id: string
itemName: string
categoryId: string
}
category.ts
export interface Category {
_id: string
categoryName: string
categoryDescription: string
}
The service implementation.
export class CategoryService {
private itemUrl = Url + 'items';
private categoryUrl = Url + 'categories';
constructor(private httpClient: HttpClient) {}
getAllItems(): Observable<Item[]> {
return this.httpClient.get<Item[]>(this.itemUrl);
}
getAllCategories(): Observable<Category[]> {
return this.httpClient.get<Category[]>(this.categoryUr);
}
getOneCategory(id: string): Observable<any> {
return this.httpClient.get(this.categoryUrl + '/find/' + id);
}
}
The component has been updated based on @SomeStudent's response