How to pass multi-dimensional array with Jquery AJAX post?

Question

I've been using Serialize() to pass checkbox form data with Post() for a basket that can hold multiple items of the same category.

When I post them using the submit button it works fine with multiple values being passed and displayed under one category.

However when I used Jquery serialize() it will only show one item per category and only two categories in total. This is an array issue but I cannot work it out.

Is there an alternative JQuery function i should be using to pass a multi-dimensional array?

Answer 1

Jquery will take multi dimensional arrays directly, no need to serialize.

var data = {
  foo:  123,
  bar:  456,
  rows: [
    {
      column1 : 'hello',
      column2 : 'hola',
      column3 : 'bonjour',
    },
    {
      column1 : 'goodbye',
      column2 : 'hasta luego',
      column3 : 'au revoir',
    },
  ],
  test1:{
    test2: {
      test3:  'baz'
    }
  }
};

_Post Data in your PHP file would look like this

Array
   (
    [foo] => 123
    [bar] => 456
    [rows] => Array
        (
            [0] => Array
                (
                    [column1] => hello
                    [column2] => hola
                    [column3] => bonjour
                )

            [1] => Array
                (
                    [column1] => goodbye
                    [column2] => hasta luego
                    [column3] => au revoir
                )

        )

    [test1] => Array
        (
            [test2] => Array
                (
                    [test3] => baz
                )

        )

    )

Once you define your data multidimensional array, your Ajax could be as simple as

$.ajax({
          type:           'post',
          cache:          false,
          url:            './ajax.php',
          data:           data
      });

If your post array may have fields that you don't know about, you can access your Post array in your php file easily with

$data = file_get_contents('php://input');
$data = json_decode($data, true);

Answer 2

I did not find any good solution, so i solved this using JSON.stringify(); here is my code

Client side :

var data = {a:{'foo':'bar'},b:{'this':'that'}};
$.ajax({ url        : '/',
         type       : 'POST',                                              
         data       : {'data':JSON.stringify(data)},
         success    : function(){ }
       });

Server Side:

$data = json_decode($_POST['data']);
print_r($data);
// Result:
// Array( "a" => Array("foo"=> "bar"), "b" => Array("that" => "this"))

Answer 3

$.post(url, {"myarray":arrayData}, function(data){/*stuff*/}, 'json');

server side you would access it for example with php

$myArray = $_POST['myarray'][0];
foreach($myArray as $item)
{
   /*logic here for picking apart your array*/
}

Answer 4

This worked for me, with jQuery and laravel 8, building (recursively) an object instead of an array:

function getSorted(wrapper) {
    let set = {};
    let children = $(wrapper).children('.list-group');
    let index = 0;

    children.each(function(i, item) {
        $(item).children('.list-group-item').each(function(j, section) {
            index++;
            set[index] = {};
            set[index].id = $(section).data('id');
            set[index].subsections = getSorted($(section));
        });
    });

    return set;
}

Sent it with ajax the usual way:

let orderingSet = getSorted($('#sections')); // recursive function for all sections

$.ajax({
    type: 'POST',
    url: sortUrl,
    dataType: 'json',
    data: {'id': sectionId, 'to_id': parentId, 'orderingSet': orderingSet}
})

And retrieved it from request: $orderingSet = request('orderingSet');

This is how the server response is displayed (only a part of it) for the multidimensional 'array' created above with specific numeric indexes as sections positions after drag & drop: