How to send complex nested JSON from Angular Typescript to Web Api?

Question

I have 2 issues with my json data as I am use to sending it "flat"

Example typescript class model

UserID: number;
AppID: number;
Key: string;
HearingsAndEventsType: number

In the past I would send above like this.

{
   "UserID": 61525,
   "AppID": 15,
   "Key": "abc",
   "HearingsAndEventsType": 1
}

NOT ANYMORE, I have to send as the nested object with 2 changes to the JSON object

1. "PageQueryString": {...
2. },   "HearingsAndEventsType": 1

THUS the mandatory structure that I need to send will look INSTEAD like this

{
  "PageQueryString": {
      "UserID": 61525,
      "AppID": 15,
      "Key": "abc"
},
    "HearingsAndEventsType": 1
}

I tried to ask the question in the link below, but I THINK it was too long in length for people to understand what I was needing. Thus other question is pretty much the same thing.... so to the person kind and smart enough to help, 2 questions for the price of 1 . thx

Angular Typescript sending complex json data to web api when model is flat

Essential i use JSON stringify and try and send model over, but I need to other the json

 getPageCommonData(menu: Menu)  {
    return this.http.post(pageCommonData, JSON.stringify(menu), httpOptions)
  ....
 }

Answer 1

You just need to create two models:

class QueryString {
    UserID: number;
    AppID: number;
    Key: string;
}

class Menu {
    PageQueryString: QueryString;
    HearingsAndEventsType: number;
}