Angular - Send a request with multiple models to API

Question

I'm new in Angular, and I'm currently into a big project where many people work, so the project is based on Angular for the front end and C# for the back end.

So, the project has some services that call the backend service:

Front:

public editProfileClient(profileClient) {
  return this.http
    .post(this.url + '/editProfileClient', profileClient)
    .pipe(map((result: ProfileClientModel) => result));
}

Back:

public async Task<ActionResult> EditProfileClient(ProfileClient profileClient)
{
    //irrelevant code here
    return Ok(model);
}

This is working well, but now I want to send a new model called Salary to that request, so I changed the back as:

public async Task<ActionResult> EditProfileClient(ProfileClient profileClient, Salary salary)

but I have no idea how I can send it on the front, so I receive it, but I cannot call it:

public editProfileClient(profileClient, salary) {
  return this.http
    .post(this.url + '/editProfileClient', profileClient, salary)
    .pipe(map((result: ProfileClientModel) => result));
}

If I try to do that, the method returns an error:

Argument of type 'OperatorFunction<ProfileClientModel, ProfileClientModel>' is not assignable to parameter of type 'OperatorFunction<ArrayBuffer, ProfileClientModel>'.

How can I achieve that?

Yong Shun · Accepted Answer · 2022-12-31 11:13:29Z

1

For the API part, combine both parameters into a single object as below:

public async Task<ActionResult> EditProfileClient(EditProfileClientInputModel input)

public class EditProfileClientInputModel
{
    public ProfileClient ProfileClient { get; set; }
    public Salary Salary { get; set; }
}

For the front-end part:

2.1. Combine both profileClient and salary parameters into a single object and pass it.

2.2. As your API returns the response of ProfileClientModel type, you should also specify the generic type: post<T>()

public editProfileClient(profileClient, salary) {
  let input = {
    profileClient: profileClient,
    salary: salary
  };

  return this.http
    .post<ProfileClientModel>(this.url + '/editProfileClient', input);
}

Update

.pipe(map((result: ProfileClientModel) => result))

As per Eliseo's feedback, the pipe() should be removed as map() is used to transform the data, while you try to transform the value into the same value, which is unnecessary.

edited Dec 31, 2022 at 11:13

answered Dec 31, 2022 at 3:48

Yong Shun

54.6k6 gold badges38 silver badges66 bronze badges

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

2 Comments

Eliseo Over a year ago

Please, not use map to do "nothing". map is for transform a response. If you retrun the same variable, remove the pipe(map). It's uneccessay.

Yong Shun Over a year ago

Hi @Eliseo, you are right, didn't realize that the .map() is unnecessary. Will update to the answer. Thanks for the feedback.

Collectives™ on Stack Overflow

Angular - Send a request with multiple models to API

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related