Error trying to diff '[object Object]'. Only arrays and iterables are allowed - Angular API Get Request from .Net - asp.net

Question

I'm a on learning stage, and a little bit of a noob, sorry if this is a stupid question. I'm working on a Movie DB project, with movies from live API, Favorite list, JWT auth, etc. I'm now on the end part, have everything done so far, and have one problem. Every person who click's on see details about movie, the movie will be sent on my DB. And with this user can save movie to his favorite table (.net Crud operations). Everything work but when I want to get movies from a table that's between movies table and users table (favorite table many to many relation) I get a error in my swagger everything is working, and I can get every movie that's in favorite, but in angular I user *ngFor, and the error say that it must return a array, but I'm getting a Object, every other get request works only this one doesn't. Here is my code and error:
You can see I get everything I want in console, but UI is 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));
}
And this is my 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 tried a lot of thing, the closest I get is this, and when I change in .net request the .FirstOrDefaultAsync() to .ToListAsync(). When I it to ToListAsync I get this:
In this case I don't get any error but nothing is showing in UI
I know the question is big, but I'm desperate, I'm stuck on this a few day's, and every help is great. Thank you!!!

Answer 1

Use this way, it will work.
<ng-container *ngIf="requests">
<div
*ngFor="let fav of requests.imdbId; index as i"
class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-xs-12"
>
<div class="card">
<img [src]="requests.poster[i]" class="card-img-top" />
<div class="card-body">
<p class="card-text">{{ requests.title[i] }}</p>
</div>
</div>
</div>
</ng-container>
Example:
https://stackblitz.com/edit/angular-ivy-f251ko?file=src%2Fapp%2Fapp.component.html