I am working with an Interface that looks like this:
export interface INavData {
name?: string;
url?: string | any[];
icon?: string;
}
To populate this Interface, I use the following data structure:
export const navItems: INavData[] = [
{
name: 'Dashboard',
url: '/dashboard',
icon: 'icon-speedometer'
},
{
name: 'Colors',
url: '/Category/subcategory',
icon: 'icon-drop'
},
{
name: 'Typography',
url: '/Category/category',
icon: 'icon-user'
}
}
In my database, I have a Menus table with the columns:
- Name
- Url
- Icon
I fetch data from this table using an API. Can anyone guide me on how to retrieve data from the API and map it to this Interface?
For context, here is an example of how I fetch data in my Service:
export class myService {
readonly BaseURI = 'http://localhost:542213/api';
constructor(private http: HttpClient) { }
getMenus()
{
return this.http.get<Menus[]>(this.BaseURI + '/Menus');
}
}
I am looking to dynamically extract the Name, Url, and Icon values from the API - any suggestions on how to achieve this?