Can't send a Multidimensional Array from JavaScript trough AJAX to PHP

Question

I saw a lot of problems regarding the exact same thing. But I tried so many thing's that I'm really not sure if what I'm doing even works anymore.

So, I have this multi-dim array, wich I create by looping trough an html table., I want to send it to PHP, so I can loop it, and create the objects I need to store it in a database.

But all I get from PHP when I try to loop it trough a for each is "Warning: Invalid argument supplied for foreach()"

function ReturnFamilyMembers() 
{
   var Family = [];
   var Table= document.getElementById('FamilyTable');
   var RowQuantity= Table.rows.length; 

   for (var i = 0; i < RowQuantity; i++)
   {
     var Columns= Table.rows.item(i).cells;
     var ColumnQuantity= Columns.length;
     Family[i] = [];

        for(var j = 0; j < ColumnQuantity; j++)
        {
          Family[i][j] = Columns.item(j).innerHTML;
        }
    }

    var headers =
    {
        'Content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
    };

    var FamilyArray = encodeURIComponent( JSON.stringify( Family) );
    /*console.info( payload );*/

    var xhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    /* Add a callback function to process any response from target url ( Worker.php )*/
    xhttp.onreadystatechange = function()
                            {
                                if( xhttp.readyState == 4 && xhttp.status == 200 )
                                {
                                    cbReturnFamilyMembers.call( this, xhttp.response );
                                }
                            };

    xhttp.open( 'POST', 'Worker.php', true ); 
    for( header in headers ) xhttp.setRequestHeader( header, headers[ header ] );
    xhttp.send( 'Family=' + FamilyArray );

}

function cbReturnFamilyMembers($resp,$response)
{
    alert($resp + $response);
}
}

And the php side...

$Family =  json_decode( $_POST['Family'],true);

foreach($Family as $Array)  ---> This line launches the error.
{
   foreach($Array as $Value) 
   {
    ///object creation
   }
}

Thank you in advance. I think Im really stucked here, since Im new to PHP, JS and AJAX, everything seems to happen magically. (Can't really say if Im doing thing's the right way.) I hope Im being clear enough, or tell me please if I can clarify anything.

--------------------------------------****--------------------------------------

EDIT: Im sorry for the late reply and I thank you for your answers. Im going to update the code, so you can see what I have done so far. (Basically I changed the Ajax Part, to be a POST action like you guys said). I guess I did not explain the whole thing pretty well, this array must be sent trough submitting a form, this function is called on the "onSubmit" (sorry for the lack of explanation). I came to realize I did not have a member in the $_POST array from php that's called "Family", because I got an error of "Index not found", so, I hid an input in the form and called it that way in the NAME property. In spite of all that, I keep receiving a non-array like value on the php side, (Actually, when I echo it, it prints a one (1)). Im starting to think of other way's of passing an array, but that's why I used JS and ajax in the first place. Im doubting of the "xhttp.send( 'Family=' + Array );" part... is it really posting the array on the index ['Family'] of the $_POST array?, I wonder. Maybe the array passed as a value is overwritted by the input of the form (That has no value when submitted, actually)

*************************EDIT,AGAIN*****************************************

Changed the code, and worked perfectly.(Added the Cast to an Array object)

$Family =  (Array)json_decode( $_POST['Family']);

Answer 1

I'm not a native JavaScript guru (I prefer something like jQuery when it comes to AJAX etc.), but from what I read in your code you do not receive the expected POST data on the PHP side. Looking at your ajax call I see something weird:

xhttp.open("POST", "Worker.php&Family= " +  
   encodeURIComponent(JSON.stringify(Family)), true);
xhttp.send();

I see that you are using & instead of ? in the GET request.
If I look at the example code on w3schools it shows me something different:

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

Try changing your JavaScript code to send data via POST, not GET.

Answer 2

I didn't notice last night when I posted my initial comment some of the minor errors with your original function, though others have picked up on them and passed comment above - the function was supposedly sending via POST but there were no parameters sent in the send() method, only appended to the url as you would do for a GET request. Also, though not critical I believe, you were not setting any headers with the request and there also is no callback function.

The altered code below does send the contents from a table as intended over POST

<script type='text/javascript'>
    /* callback function to handle response data */
    function cbReturnFamilyMembers( response ){
        alert( response )   
    }

    function ReturnFamilyMembers() {
       var Family = [];
       var Table= document.getElementById('FamilyTable');
       var RowQuantity= Table.rows.length; 

       for ( var i = 0; i < RowQuantity; i++ ){
            var Columns= Table.rows.item(i).cells;
            var ColumnQuantity= Columns.length;
            Family[i] = [];
            for( var j = 0; j < ColumnQuantity; j++ ) Family[i][j] = Columns.item(j).innerHTML;
        }

        /* XHR headers to be set */
        var headers={
            'Content-type': 'application/x-www-form-urlencoded',
            'X-Requested-With': 'XMLHttpRequest'
        };
        var payload=encodeURIComponent( JSON.stringify( Family ) );
        /*console.info( payload );*/

        var xhttp=window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

        /* Add a callback function to process any response from target url ( Worker.php )*/
        xhttp.onreadystatechange=function(){
            if( xhttp.readyState==4 && xhttp.status==200 ){
                cbReturnFamilyMembers.call( this, xhttp.response );
            }
        };

        xhttp.open( 'POST', 'Worker.php', true ); 
        for( header in headers ) xhttp.setRequestHeader( header, headers[ header ] );
        xhttp.send( 'Family='+payload );
    }
</script>

Answer 3

I was trying to see trough thing's that I missed and added some casting on $_POST (Just in case, you know) to be an actual array, and guess what. It worked like a charm. These are thing's that I really hate about php, but I manage.

So, the code on the PHP side stay's like this...

$Family =  (Array)json_decode( $_POST['Family']);

And it does not complain anymore about passing an uncorrect argument on for each.,actually It seem's like it casted the Array's inside of the father Array as well, because the nested for each inside of it worked as expected.

Well, Im a litlle more of ashamed of the amount of time that I lost with this thing, but I thank you all for your help, I greatly appreciate it, and It's actually your answers that led me trough get this thing working, (And get the data sending trough $_POST).