Question

I am passing an array from jQuery to php.

The array is generated from a table with this code:

    var stitchChartArray = [];
    var row = 0;

    // turn stitch chart into array for php
    $('#stitchChart').find('tr').each(function (index, obj) {

        //first row is table head- "Block #"
        if(index != 0){
            stitchChartArray.push([]);
            var TDs = $(this).children();
            $.each(TDs, function (i, o) {
                var cellData = [$(this).css('background-color'), $(this).find("img").attr('src')];
                stitchChartArray[row].push(cellData);
            });
            row++;
        }

    });

In console it looks like this:

[[["rgb(75, 90, 60)", "symbols/177.png"], ["rgb(75, 75, 60)", "symbols/184.png"], ["rgb(75, 90, 60)", "symbols/177.png"], 7 more...], [["rgb(105, 105, 105)", "symbols/163.png"], ["rgb(75, 75, 60)", "symbols/184.png"], ["rgb(75, 90, 60)", "symbols/177.png"], 7 more...], [["rgb(105, 105, 105)", "symbols/163.png"], ["rgb(75, 90, 60)", "symbols/177.png"], ["rgb(75, 75, 60)", "symbols/184.png"], 7 more...], [["rgb(75, 90, 60)", "symbols/177.png"], ["rgb(75, 90, 60)", "symbols/177.png"], ["rgb(98, 119, 57)", "symbols/210.png"], 7 more...], [["rgb(105, 105, 105)", "symbols/163.png"], ["rgb(105, 105, 105)", "symbols/163.png"], ["rgb(150, 150, 195)", "symbols/72.png"], 7 more...], [["rgb(75, 165, 105)", "symbols/187.png"], ["rgb(134, 158, 134)", "symbols/64.png"], ["rgb(165, 180, 180)", "symbols/171.png"], 7 more...], [["rgb(60, 150, 75)", "symbols/189.png"], ["rgb(120, 120, 90)", "symbols/225.png"], ["rgb(143, 163, 89)", "symbols/209.png"], 7 more...]]

It represents each row of a table->each cell of row->[0]rgb value of bg of cell [1]icon in cell.

This jQuery code returns the correct element(and rgb value) from the array:

alert(stitchChartArray[1][1][0]); //row 1,cell 1, first value(rgb)

But when it gets sent to the php script with this:

$.post('makeChartPackage.php', {'stitchChart[]': stitchChartArray }, function(data){
        alert(data);
    });

The php throws an error:

Cannot use string offset as an array in /Users/tnt/Sites/cross_stitch/makeChartPackage.php on line 33

$stitchChart = $_POST['stitchChart']; 
echo $stitchChart[1][1][0]; //line 33

I am assuming I am either constructing the array incorrectly or passing it to the php script incorrectly.

EDIT:
I did this to return the array to jQuery:

$stitchChart = $_POST['stitchChart'];
print_r($stitchChart); 

And here was the result:
Array
(
[0] => rgb(75, 90, 60),symbols/177.png,rgb(75, 75, 60),symbols/184.png,rgb(75, 90, 60),symbols/177.png,rgb(98, 119, 57),symbols/210.png,rgb(180, 195, 105),symbols/388.png,rgb(165, 165, 120),symbols/235.png,rgb(75, 75, 60),symbols/184.png,rgb(90, 90, 45),symbols/195.png,rgb(120, 120, 75),symbols/156.png,rgb(105, 105, 105),symbols/163.png
[1] => rgb(105, 105, 105),symbols/163.png,rgb(75, 75, 60),symbols/184.png,rgb(75, 90, 60),symbols/177.png,rgb(75, 90, 60),symbols/177.png,rgb(165, 165, 120),symbols/235.png,rgb(120, 120, 75),symbols/156.png,rgb(75, 90, 60),symbols/177.png,rgb(75, 90, 60),symbols/177.png,rgb(105, 105, 105),symbols/163.png,rgb(120, 120, 90),symbols/225.png
[2] => rgb(105, 105, 105),symbols/163.png,rgb(75, 90, 60),symbols/177.png,rgb(75, 75, 60),symbols/184.png,rgb(75, 90, 60),symbols/177.png,rgb(98, 119, 57),symbols/210.png,rgb(75, 90, 60),symbols/177.png,rgb(75, 75, 60),symbols/184.png,rgb(105, 105, 105),symbols/163.png,rgb(120, 120, 90),symbols/225.png,rgb(105, 105, 105),symbols/163.png

It appears the array is not multidimensional?

Answer 1

$_POST['stitchChart'] in the context you have addressed it there is (effectively) a JSON representation of a multidimensional array, stored as a string. When you treat a string as a multidimensional indexed array in PHP, you will get that error. The first [x] is treated as a “string offset” – i.e. the character at position x – but the next and any subsequent [x] addresses can only be treated as arrays (you cannot get a substring of a single character) and will emit the error you have received.

To access your data as an array in PHP, you need to use json_decode():

$stitchChart = json_decode($_POST['stitchChart'],TRUE); 
echo $stitchChart[1][1][0];

EDIT

Because the jQuery data argument seemingly can’t deal with multidimensional arrays, you should use Douglas Crockford’s JSON-js library and pass the result into data as a string. NB: use json2.js.

Here is how you could do this:

stitchChartArray = JSON.stringify(stitchChartArray);
$.post('makeChartPackage.php', {'stitchChart': stitchChartArray }, function(data){
    alert(data);
});

If you use this code, my original PHP suggestion should work as expected.