How map C# class to angular object

Viewed 928

I have an object class and i want to use it in my ASP.NET Core angular project. I can't map the object return through the http get method. Any options please?

class file:

[Serializable]
public class PricesRules
{
    public HashSet<Price> Prices { get; set; }
    public HashSet<Customer> Customers { get; set; }
    public HashSet<Payment> Payments { get; set; }
}
component.ts :

public prices: PricesRules;

constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) {
  http.get<PricesRules>(baseUrl + 'api/UpdatePrices/GetLastPrices').subscribe(result => {
      this.prices = result[0];
}, error => console.error(error));
}

interface PricesRules {
Prices: any[];
Customers: any[];
Payments: any[];
}

Controller file:

[HttpGet("[action]")]
public IEnumerable<PricesRules> GetLastPrices()
{
    PricesRules pricesRules = null;
    //some code here
    yield return pricesRules;
}

In my component I have good values in my result object, but my object prices is undefined after.

Edit : Now the get method is ok, but my post method not firing my controller.

component.ts '''

  onClickSubmit(data) {   

  const params = new HttpParams().set('ID', '1');
  const headers = new HttpHeaders().set('content-type', 'application/json');
  this.http.post<PricesRules>(this.baseUrl + 'api/UpdatePrices/PostUpdatePrices' + this.prices, { headers, params }).subscribe(result => {
      console.log("success");
  }, error => console.error(error));

} '''

Controller

'''

[HttpPost("[action]")]
    public async Task<IActionResult> PostUpdatePrices([FromBody] PricesRules pricesRules)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }
        return null;
   }

'''

I have this error :

Object { headers: {…}, status: 404, statusText: "Not Found", url: "https://localhost:44374/api/UpdatePrices/PostUpdatePrices[object%20Object]", ok: false, name: "HttpErrorResponse", message: "Http failure response for https://localhost:44374/api/UpdatePrices/PostUpdatePrices[object%20Object]: 404 Not Found", error: "\n\n\n\nError\n\n\n

Cannot POST /api/UpdatePrices/PostUpdatePrices%5Bobject%20Object%5D
\n\n\n" }

2 Answers

I assume your api return PricesRules instead of IEnumerable<PricesRules>(as you said you get the data).So Because result will be an object like {Prices:[...],...} so you can not access it by index you will need to change

this.prices = result[0];

to

this.prices = result.Prices;

or this.prices = result['Prices'];

I have modify the component.ts

'''

 const headers = new HttpHeaders()

      .set("Content-Type", "application/json");



  this.http.post(this.baseUrl + 'api/UpdatePrices/PostUpdatePrices',

      this.prices,

      { headers })

      .subscribe(

          val => {

              console.log("PUT call successful value returned in body",

                  val);

          },

          response => {

              console.log("PUT call in error", response);

          },

          () => {

              console.log("The PUT observable is now completed.");

          }

      );

'''

Related