Send list/array as parameter with jQuery getJson

Question

I have the following where I'm trying to send list/array to MVC controller method:

var id = [];
var inStock = [];

$table.find('tbody>tr').each(function() {
    id.push($(this).find('.id').text());
    inStock.push($(this).find('.stocked').attr('checked'));
});

var params = {};
params.ids = id;
params.stocked = inStock; 

$.getJSON('MyApp/UpdateStockList', params, function() {
    alert('finished');
});

in my contoller:

public JsonResult UpdateStockList(int[] ids, bool[] stocked) { }

both paramaters are null.

Note that if I change the params to single items

params.ids = 1;
params.stocked = true; 

public JsonResult UpdateStockList(int ids, bool stocked) { }

then it works ok, so I don't think it's a routing issue.

score 42 · Accepted Answer · answered Sep 09 '10 at 13:42

42

Try setting the traditional flag:

$.ajax({
    url: '/home/UpdateStockList',
    data: { ids: [1, 2, 3], stocked: [true, false] },
    traditional: true,
    success: function(result) {
        alert(result.status);
    }
});

works fine with:

public ActionResult UpdateStockList(int[] ids, bool[] stocked)
{
    return Json(new { status = "OK" }, JsonRequestBehavior.AllowGet);
}

answered Sep 09 '10 at 13:42

Darin Dimitrov

1,023,142
271
3,287
2,928

genius, thank you! It seems there is a bug in getJson with 1.4.2, see http://forum.jquery.com/topic/getjson-breaks-with-1-4-2-when-parameter-argument-is-an-array – fearofawhackplanet Sep 09 '10 at 13:50
2

This is not a bug. It is a breaking change from previous the version. That's why they introduced the `traditional` parameter. – Darin Dimitrov Sep 09 '10 at 13:52

hippietrail · Answer 2 · 2011-12-21T10:59:35.943

24

Besides calling .ajax() instead of .getJSON() as Darin suggests or setting the global jQuery.ajaxSettings.traditional to true as jrduncans suggests, you can also pass the result of calling the jQuery .param() function on your params object:

var id = [];
var inStock = [];

$table.find('tbody>tr').each(function() {
    id.push($(this).find('.id').text());
    inStock.push($(this).find('.stocked').attr('checked'));
});

var params = {};
params.ids = id;
params.stocked = inStock; 

$.getJSON('MyApp/UpdateStockList', $.param(params, true), function() {
    alert('finished');
});

edited Dec 21 '11 at 10:59

answered Dec 21 '11 at 10:33

hippietrail

15,848
18
99
158

1

Yeah, I agree. While Darin pointed out the traditional flag (you're awesome don't get me wrong), this answer let's you use getJson, which is what OP wanted. – Danny van der Kraan Sep 14 '16 at 06:13

score 6 · Answer 3 · answered Oct 20 '10 at 17:47

Unfortunately, while it seems that jquery provides a "traditional" flag to toggle this behavior on jQuery.ajax, it does not on jQuery.getJSON. One way to get around this would to be set the flag globally:

jQuery.ajaxSettings.traditional = true;

See the documentation for jQuery.param: http://api.jquery.com/jQuery.param/ Also see the release notes for this change: http://jquery14.com/day-01/jquery-14 (search for 'traditional')

score 0 · Answer 4 · edited May 23 '17 at 12:02

In the view, generate multiple named fields (not id, as id should be unique per field), noting the use of Name not name:

@foreach (var item in Model.SomeDictionary)
{
    @Html.TextBoxFor(modelItem => item.Value.SomeString, new { Name = "someString[]" })
}

Then retrieve the input field values using jQuery, so:

var myArrayValues = $('input[name="someString[]"]').map(function () { return $(this).val(); }).get();

You can use this directly in jQuery / AJAX as follows:

$.ajax({
    type: "POST",
    url: "/MyController/MyAction",
    dataType: 'json',
    data: {
        someStrings: $('input[name="someString[]"]').map(function () { return $(this).val(); }).get(),
        someDates: $('input[name="someDate[]"]').map(function () { return $(this).val(); }).get(),

Then in the controller action in MVC:

[HttpPost]
public JsonResult MyAction(string[] someStrings, DateTime[] someDates...

Send list/array as parameter with jQuery getJson

4 Answers4

Linked