I have been learning about Angular heroes through a tutorial and decided to apply my knowledge in a small test project. While it worked fine with mock items using the built-in http server, I am facing difficulties retrieving items from a Django REST API.
To test if the API is functioning correctly, I used the following command:
curl -H 'Accept: application/json; indent=4' http://127.0.0.1:5000/inventory/items_viewset/ -L
{
"count": 13,
"next": "http://127.0.0.1:5000/inventory/items_viewset/?page=2",
"previous": null,
"results": [
{
"label": "00004",
"name": "Test2",
"notes": "222",
"owner": "admin",
"photo": null
},
{
"label": "0000007",
"name": "Test1",
"notes": null,
"photo": "http://127.0.0.1:5000/media/item_images/2021/02/19/IMG_20210207_134147.jpg"
}
]
}
This is how my Item model item.ts looks like:
export interface Item {
label: string;
name: string;
notes: string;
}
I have an items.component.ts that displays these items:
items: Item[];
constructor(private itemService: ItemService, private messageService: MessageService) { }
ngOnInit(): void {
this.getItems();
}
getItems(): void {
this.itemService.getItems()
.subscribe(items => this.items = items);
}
In my service file, I'm attempting to connect to the real API:
import { Injectable } from '@angular/core';
import { Item } from './item';
// Other imports...
@Injectable({
providedIn: 'root'
})
export class ItemService {
constructor( private http: HttpClient, private messageService: MessageService) { }
// Methods for getting items from API...
I'm struggling with mapping the JSON response from the API to the Item model. I can't access the key results and map it properly. Any suggestions or hints on what I might be doing wrong?