Angular with ASP.NET Core Web API : recieves [object, Object]-CodePudding

My Angular Project use a ASP.NET Core Web Api.

For one of my services when I call it in the Angular project I get an [object Object] while when I test it with Swagger I get a Json result.

In this method, when I display response in the browser console I recieved an [object Object]

getMenuByTruck = () =>{
    const id: string = this.activeRoute.snapshot.params['id'];
    const apiMenu: string = environment.apiAddress   'TruckMenu/'   id;
    this.repository.getData(apiMenu)
      .subscribe(response => {
        console.log('Menu = '   response);
        this.menu = response as Menu[];
      },
      (error) =>{
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      })
  }

I compared my service with other ones and I haven' t found any differences.

The mapping in Angular is correct.

I don't know why I recieved a [object Object]. Any idee?

Edit : Below the method in the Web Api

[HttpGet("{truckId}", Name = "MenuByTruckId")]
[ProducesResponseType(StatusCodes.Status400BadRequest)]
public async Task<ActionResult<TruckMenu>> GetByTruckId(int truckId)
{
  if (truckId <= 0) return BadRequest();
    try
      {
    var truckMenus = await _repository.TruckMenu.GetByTruckIdAsync(truckId);
    var truckMenusResult = _mapper.Map <IEnumerable<TruckMenuDto>> (truckMenus);

    if (truckMenusResult == null) return NotFound();

    return Ok(truckMenusResult);
}
   catch (Exception ex)
   {
    _logger.LogError($"Something went wrong inside GetById action int TruckMenuController : {ex.Message} ");
    return StatusCode(StatusCodes.Status500InternalServerError, "Internal Server Error");
    }
}

Here is my Web Api model:

public class TruckMenuDto : DescriptiveItemDto
{
   public int TruckId { get; set; }
   public int FoodCategoryId { get; set; }
   public virtual FoodCategoryDto FoodCategory { get; set; }
   public string Title { get; set; }
   public string Ingredients { get; set; }
   public string Image { get; set; }
   public decimal Price { get; set; }

   public virtual TruckDto Truck { get; set; }
}

and the same model in angular:

export interface Menu extends DescriptiveItem{
    truckId: number;
    trucks: Truck;
    foodCategoryId: number;
    foodCategory?: FoodCategory;
    title: string;
    ingredients: string;
    image: string;
    price: number;
}

CodePudding user response：

I assume your repository is some kind of Angular service that returns an Observable and uses http.get.

When I've had problems like this I make sure first that my request is getting to my WebAPI controller method and that it's returning the view model that I want. It sounds that like that's working.

The other thing I can think is make sure that your view model has public properties with getters and setters. If you are returning a collection, the List has worked well for me from .NET Core -> Angular.

You can break into your app and look at the response object and from my experience any public properties will be mapped to properties on the response. If your .NET view model does not match your Angular view model the .NET properties should populate anyway.

CodePudding user response：

I succeeded to loop into the object but can't access to the truck object. I don't know why?

<div *ngFor="let t of menu">{{t.title}}<br>
     <span>{{t.ingredients}}</span><br>
     <span>{{t.price}}</span>
</div>

I continue my tests.