send multiple objects via ajax (using angular)

Question

I have a list of user inputs in an object 'data'. (for e.g data.username, data.password, data.age)

i am passing the data object to backend like this using angular.

var submits = "=" + JSON.stringify(data);

$.ajax({
            type: "POST",
            url: serviceURL,
            data: submits
});

I am passing two more objects. selections and grid. how can i pass all these three together in one ajax call ? or do i have to transfer it independently. will it affect the performance if i transfer these details separately.

can i do something like this to send the object together in one ajax call?

var data = {};
data[0] = data1;
data[1] = data2;

How can i retrieve it separately at the server side using c# if at all they are passed together.

Heres the 3 objects that i need to pass

data -->>         ["Raul","New York","31"]
selections-->>    ["dy.txt","my.txt","yy.txt"]
grid-->           ["sesion","id"]

$.ajax is not angular but a helper method in jQuery library. You should not be mixing jQuery inside your angular controllers. Use the $http service to make web api calls from your angular code. — Shyju
– Shyju, Commented Dec 16, 2015 at 20:08

Shyju · Accepted Answer · 2015-12-10 22:08:12Z

3

Assuming you have a view model like this in your server side

public class CreateUserViewModel
{
  public string UserName{set;get;}
  public string Location {set;get;}
  public int Age {set;get;}
}
public class RegisterViewModel
{
  public CreateUserViewModel User {set;get;}
  public List<string> Selections {set;get;}
  public List<string> Grid {set;get;}
}

and an MVC action method like this

public ActionResult Create(RegisterViewModel model)
{
  // read model and save and return some JSON response
}

You can simply build the javascript object which matches the structure of the view model and post it using angualr's $http service. No need to worrry about setting content-Type or Json stringifying it. Angualr will take care of it.

var model={ User : {} ,Selections :[], Grid=[] };
model.User.Age =23;
model.User.UserName ="test";
model.User.Location="New York";

model.Selections.push("dy.txt");
model.Selections.push("some.txt");

model.Grid.push("session");
model.Grid.push("id");

var url="replcaeUrltoYourActionMethodHere";

$http.post(url, model)
.then(function(response)
{
  // do something with the response
  // var result= response.data
});

edited Dec 10, 2015 at 22:08

answered Dec 10, 2015 at 20:15

Shyju

220k106 gold badges420 silver badges499 bronze badges

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

2 Comments

Ayesha Over a year ago

@Shyju- updated my question with the list of objects which will be passed and wat kind of information each will have. will the code you mentioned change now according to the updated question?

Shyju Over a year ago

@Ayesha I updated my answer to reflect the data structure you provided.

Niki van Stein · Accepted Answer · 2015-12-10 19:57:49Z

1

You can send multiple objects / variables in ajax with:

var submits = "=" + JSON.stringify(data);
$.ajax({
        type: "POST",
        url: serviceURL,
        data: {submits : submits, data1:data1, data2:data2}
});

In your C# you can access data1 and 2 in the same way as you handle submits now. Depending of what is in data1 and data2 you might need to stringify it first.

second option:
You can also if you want to (but it is more ugly) use the stringify on everything at once and only pass the string:

data = {};
data["data1"] = data1;
data["data2"] = data2;
var submits = "=" + JSON.stringify(data);

answered Dec 10, 2015 at 19:57

Niki van Stein

10.8k3 gold badges33 silver badges63 bronze badges

Comments

b0redom · Accepted Answer · 2015-12-10 20:01:16Z

1

Are you using WebApi or MVC on the server? If so, the simplest approach would be to create a class which holds the 3 entities you need to send and leverage the built-in model-binding

So in your example you list what looks to be a user form, selections and grids. I'm not really sure what the last two are but an example Model might look something like this:

public class UserSubmissionViewModel
{
    public UserSubmissionViewModel() { }

    public UserFormModel User {get;set;}

    public SelectionsModel Selections { get; set; }

    public GridModel Grids { get; set; }
}

Then on your web api controller or your MVC controller you'd have a method such as this:

public async Task<IHttpActionResult> Submit(UserSubmissionViewModel model)

And your javascript would resemble something roughly like this:

var toSend = {"UserFormModel":data, "SelectionsModel":selections, "GridModel":grids};
$.ajax({
         type:"POST",
         data:toSend, //<--- you might need to JSON.stringify this, cant test this code at the moment
         url:serviceURL //<-- Calls your Submit method on the controller
    });

answered Dec 10, 2015 at 20:01

b0redom

3872 silver badges11 bronze badges

3 Comments

Ayesha Over a year ago

@b0redom- i will try using this part of the code you mentioned above

Ayesha Over a year ago

@bOredom- updated my question with the list of objects which will be passed and wat kind of information each will have. will the code you mentioned change now ?

b0redom Over a year ago

The intent of the code will not. You will obviously need to fix the field names to match. It looks like selections is just a list, so you could just use a string[] instead of an actual object if you wanted.

Collectives™ on Stack Overflow

send multiple objects via ajax (using angular)

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related