I am currently in the learning stage and consider myself a novice, so please forgive me if this question seems silly. I am working on a Movie Database project that involves integrating movies from a live API, creating a favorite list, implementing JWT authentication, and more. I have completed most of the project, but I am facing an issue with retrieving movies from a table that sits between the movies table and the users table (favorite table with a many-to-many relationship). While everything seems to work fine in my Swagger documentation and I can retrieve movies from the favorite table, I encounter an error when using *ngFor in Angular. The error indicates that it expects an array but receives an object instead. All other GET requests work properly except for this one. Here is the code snippet along with the error:
https://i.sstatic.net/n4fap.png Although I am able to retrieve the desired information in the console, the UI displays an error
Component .ts and HTML:
//HTML
<div *ngFor="let fav of requests" class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="card">
<img src="{{fav.Poster}}" class="card-img-top">
<div class="card-body">
<p class="card-text"> {{fav.Title}}</p>
</div>
</div>
</div>
.Ts
export class FavoriteListComponent implements OnInit {
constructor(public service: MovieService) { }
requests: any = [];
ngOnInit(): void {
this.getFav();
}
getFav(){
this.service.getFavorite1().subscribe(
res => {
this.requests = res;
console.log(res)
});
}
}
MovieService
getFavorite1(){
return this.http.get('http://localhost:5002/api/Favorite/getUsersFavorite').pipe(map(res => res));
}
This is the GET request in .Net 5
[Authorize]
[HttpGet("getUsersFavorite")]
public async Task<IActionResult> GetUsersFavoriteMovies()
{
string userId = User.Claims.First(a => a.Type == "UserID").Value;
var user = await _context.DbUsers.Where(n => n.Id == Int32.Parse(userId)).Select(movies => new FavoriteView()
{
ImdbId = movies.Favorites.Select(n => n.ImdbId).ToList(),
Title = movies.Favorites.Select(n => n.Movies.Title).ToList(),
Poster = movies.Favorites.Select(n => n.Movies.Poster).ToList()
}).FirstOrDefaultAsync();
return Ok(user);
}
I have tried various approaches, and the closest I have come to a solution is by changing the .FirstOrDefaultAsync() in the .NET request to .ToListAsync(). However, when I make this change, I encounter the following issue:
https://i.sstatic.net/z5Fmo.png
Although this resolves the error, nothing is displayed in the UI
I realize this is a lengthy question, but I am really struggling with this and would appreciate any help. Thank you!!!