How to directly map an object class from angular 2 to to web api using JSON?

Question

I have a model class I created in angular 2 to track fields. This same class also exists as a model in my webapi project.

export class People {
    Name: string;
    Phone: string;
    Date: date;}

export class Address {
 street: string,
 zip: string,
}

in my service I send this to my webapi controller

getPeopleData(peopleModel: People, addressmodel: Address)
{
let headers = new headers(...)
data = {
   "p": peopleModel,
   "a": addressModel
}
let body = JSON.stringify(data);

return this.http.post(url, body, {headers: headers})
.map((response: Response)=> ...
}

finally in my controller

public JArray GetPeopleData([FromBody]JObject models)
{
   var modelPeople = models["p"].ToObject<People>();
   var modelAddress = models["a"].ToObject<Address>();

}

modelPeople and modeAddress doesn't map. How can I get my model to map directly.

All I get are a bunch of null fields when there is a string of data in the JObject.

EDIT: I created a container class that holds the objects of People and Address

public class Container
{
   public People people {get; set;}
   public Address addresss {get; set;}
}

I then passed in the object to the Container and my results are still null

 public JArray GetPeopleData([FromBody]Container container)
    {
       var modelPeople = container.people;
       var modelAddress = container.address;

    }

both have all values of null.

I dont get it I feel like I am so close but something is missing

In Web API, just accept it as an object. Another words, expose a REST endpoint that accepts an object as the parameter. The object will serialize/deserialize to JSON for you, so no need to worry about how to map it over, etc. etc. — code4life
– code4life, Commented Nov 2, 2017 at 13:24
Im confused. what should my parmeter look like in the public JArray GetPeopleData([FromBody]JObject models) and what should i pass to it? — CodeMan03
– CodeMan03, Commented Nov 2, 2017 at 13:28
Yeah, the JArray is the problem. Just define the plain old C# object as the parameter. — code4life
– code4life, Commented Nov 2, 2017 at 13:32
I updated the code above to directly accept a container object that holds both classes. All of the values still comes back as null — CodeMan03
– CodeMan03, Commented Nov 2, 2017 at 13:41

Abel Valdez · Accepted Answer · 2017-11-02 14:56:16Z

1

Hello it works for me

//This is a Gobal object
 result = {
    modelPeople: '',
    modelAddress: ''
 }

constructor( private _http: Http ) {

}
getJsonModel() {
    promise = await this._http.get(URL).toPromise().then(
                res => {
                    this.result= res.json();
                }
    );
}

answered Nov 2, 2017 at 14:56

Abel Valdez

2,4081 gold badge19 silver badges34 bronze badges

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

1 Comment

CodeMan03 Over a year ago

I got it., Im an idiot. My properties in my people and address models weren't public. Its always the simple things

Collectives™ on Stack Overflow

How to directly map an object class from angular 2 to to web api using JSON?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related