My goal is to fetch motorcycle data from a web API and showcase it in my Angular project.
- ASP.NET Framework Web API 4.7
- Angular CLI: 13.3.7
- Angular: 13.3.11
On the Web API end:
Controller:
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class HomeController : ApiController
{
private NavEcommerceDBfirstEntities db = new NavEcommerceDBfirstEntities();
public HomeModel Get()
{
var streetBikesContents = db.Motorcycles.Where(m => m.Category.MotoCategory == "Street").Select(m => new MotorcycleDTO
{
ModelDto = m.Model,
PriceDto = m.Price,
BrandDto = m.Brand.Name,
CategoryDto = m.Category.MotoCategory,
DealersDto = m.Dealers.Select(d => d.Name).ToList()
});
// The rest of the code remains the same...
return homeModel;
}
}
}
}
Models:
app.component.ts:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Home Page';
constructor(private homeCategorisedBikesService: HomeCategorisedBikesService){}
ngOnInit(): void {
this.getAllBikesContents();
}
// Further implementation for fetching bike contents...
}
app.component.html:
Question:
I aim to showcase various details of each motorcycle such as model, brand, category, price, and dealers' array individually. Kindly provide feedback on any unclear areas within the code or question.
Thank you in advance.