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

Question

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;
}

Evan · Accepted Answer · 2021-09-23 15:47:43Z

2

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.

edited Sep 23, 2021 at 15:47

answered Sep 23, 2021 at 15:42

Evan

4975 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paintbox Over a year ago

thanks for you answer. I edited my question to add the Web Api method. I confirm that the response in Swgger is Json. I have checked the Angular model with the APi model and it's seems right.

Evan Over a year ago

I would try to simplify a little bit, just returning an object with public properties only and get to a base that works. Since your DTO inherits from a base class it's not what I think of as a Data Transfer Object and I don't know how everything will be mapped to Angular. If you get something that works you can add more properties and see where it breaks.

Paintbox · Accepted Answer · 2021-09-23 17:49:36Z

-1

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.

answered Sep 23, 2021 at 17:49

Paintbox

4076 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related