How can i post multiple arrays with JQuery AJAX in an MVC controller?

Question

My Jquery is

 $(":checkbox").change(function() {
        if(this.checked) {
            var man_data = { 'man': [] };
            var size_data = { 'size': [] };
            var color_data = { 'color': [] };

            $('input:checked').each(function () 
            {
                if(this.name == 'man') man_data['man'].push($(this).val());
                if(this.name == 'size') size_data['size'].push($(this).val());  
                if(this.name == 'color') color_data['color'].push($(this).val());  
            });
            var path = "/Home/Index";
            $.ajax({
                url: path, type: "POST", cache: "false",
                dataType: "json", contentType: "application/json; charset=utf-8",
                data: JSON.stringify(man_data),
                traditional: true,
                converters: {'text json': true}
            }).success(function (responseText) {
                $('#Grid').replaceWith(responseText);
            }).error(function (responseText){
                swal("Error!", "Test 1", "error");
            });
            //swal("Error!", "Test 2", "error");
        }
    });

If i post only one array data: JSON.stringify(man_data) it works great. The problem is that i would like to post the contents of all the 3 arrays

man_data
size_data
color_data

I tried something like

data: JSON.stringify(man_data + size_data + color_data)

but it is not working as expected :(

How should i modify the code above?

I also tried something like

data: {'man':JSON.stringify(man_data),'size':JSON.stringify(size_data)},

but now i get the error Invalid JSON primitive: man.

UPDATE

The data are sent at an MVC controller

public ActionResult Index(int[] man = null, int[] size = null, int[] color = null)
{
}

Have you tried doing something like man_data.concat(size_data, color_data)? — Dan
– Dan, Commented Sep 26, 2015 at 15:22
Is man_data definitely an array? Getting is not a function error would suggest that it isn't. Oh i see, it's because they're all wrapped in objects, is there a reason for that? I'll move this into an answer. — Dan
– Dan, Commented Sep 26, 2015 at 16:19
@Dan Actually the data are sent at an MVC controller and the man, size and color are the controller's parameters. I will try the solution of yours of course — OrElse
– OrElse, Commented Sep 26, 2015 at 17:27

Dan · Accepted Answer · 2015-09-26 16:34:02Z

To combine the data I would use Array.prototype.concat().

As you are storing your arrays within objects, you'll have to access the properties to get the array before concatenating them. Here I am concatenating the arrays into a new array:

[].concat(man_data.man, size_data.size, color_data.color);

Unless you are planning on adding more properties to those objects I would suggest just changing them to arrays.

var man_data = [];
var size_data = [];
var color_data = [];

Like this you can just do:

[].concat(man_data, size_data, color_data);

Alternatively, instead of concatenating you could just send the data in the following structure:

var data = {
  man_data: [],
  size_data: [],
  color_data: []
};

Than way all you would have to do is send off that object JSON.stringify(data);

Chandrakant Sutar · Accepted Answer · 2015-09-26 19:05:55Z

0

Try changing your data parameter on Ajax call as data: { 'man': JSON.stringify(man_data), 'size': JSON.stringify(size_data),'color': JSON.stringify(man_color)} sorry if code formatting is not correct, I am on mobile.

edited Sep 26, 2015 at 19:05

answered Sep 26, 2015 at 18:08

Chandrakant Sutar

1143 bronze badges

3 Comments

OrElse Over a year ago

Hello, i get JSON.Stringify is not a function

Chandrakant Sutar Over a year ago

use JSON.stringify, I had S capitalized which should not be.

Chandrakant Sutar Over a year ago

@Chocol8 see if the edit works. otherwise I will check it out once I reach home.

Collectives™ on Stack Overflow

How can i post multiple arrays with JQuery AJAX in an MVC controller?

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related