How can I assign json properties from my frontend to multiple backend models in my API?

Question

I have a React component that posts to an API controller like this:

onSubmit={async values => {
    await new Promise(resolve => setTimeout(resolve, 500));
    axios({
        method: "POST",
        url: "/educationalgames/api/acceptentry",
        data: values
    });
    alert(JSON.stringify(values, null, 2));
}}

When I hit submit, I see the values it finds:

{
    "eligiblePlayers": [],
    "teamName": "FalconOne",
    "teamEmail": "[email protected]",
    "trainer": "",
    "department": "Physics",
    "researchType": "Meta",
    "numOfStudents": 50,
    "currentState": true
}

The data above are properties from a mix of different models in my c# backend API.

teamName, teamEmail, and trainer belong to my team.cs model.

eligiblePlayers, department belong to the department.cs model.

researchType, numOfStudents, and currentState belong to my research.cs model.

My question is, I can't figure out how do I translate that data so that my API controller can read it and assign the proper values to the matching model properties.

So far I have this in my c# controller:

[HttpPost]
public async Task<ActionResult> AcceptEntry([FromBody] ???)

I'm kind of at a loss to handle this.

Is there a way?

Thanks!

You could wrap all the models in a separate view model, as seen here: stackoverflow.com/questions/39185634/… — Blaise
– Blaise, Commented Mar 11, 2020 at 14:56
Just make a new model for the API. Your models shouldn't necessarily relate directly to your backend models anyway. — DavidG
– DavidG, Commented Mar 11, 2020 at 14:57
@DavidG but if the properties from the front-end don't match my models, how would they eventually get written to the database? thanks — SkyeBoniwell
– SkyeBoniwell, Commented Mar 11, 2020 at 15:11
Like I said, your api models shouldn't necessarily be the same ones you use for your database. Write a layer in between that translates between the two. Or use a library like AutoMapper. — DavidG
– DavidG, Commented Mar 11, 2020 at 18:22

AlleXyS · Accepted Answer · 2020-03-11 14:56:26Z

1

teamName, teamEmail, and trainer belong to my team.cs model.

eligiblePlayers, department belong to the department.cs model.

researchType, numOfStudents, and currentState belong to my research.cs model.

Why you don't create a common model in your apps?

public class CommonModel {
  public string teamName {get; set;} 
  teamEmail, 
  eligiblePlayers, 
  department, 
  researchType, 
  numOfStudents, 
  currentState
}

Then, in your controller:

[HttpPost]
public async Task<ActionResult> AcceptEntry([FromBody] CommonModel model) {

 var team = new Team() {
   teamName = model.teamName,
   ...
 }
 var department = new Department() {
   eligiblePlayers = model.eligiblePlayers,
   ...
 }
}

answered Mar 11, 2020 at 14:56

AlleXyS

2,5983 gold badges20 silver badges44 bronze badges

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

2 Comments

SkyeBoniwell Over a year ago

Oh I see, so would the POST automatically put the values into the CommonModel model?

AlleXyS Over a year ago

only if your values object from React will be same structure as your CommonModel class of backend. Probably your values object is a json with all enumerated params. Net Core will map the received json into your class (CommonModel in this example)

Collectives™ on Stack Overflow

How can I assign json properties from my frontend to multiple backend models in my API?

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related