converting a two dimensional javascript array to JSON

Question

i've tried a few different json methods (stringify, toJSON, and probably some totally irrelevant others out of desperation) but can't seem to figure out how to stringify this so i can pass it to a php script. i am able to create a two dimensional array that which could be represented something like this:

array(
    'image'=>array(
        0=>'hello.jpeg', 
        1=>'goodbye.jpeg', 
        2=>'etc.jpeg'),
    'resume'=>array(
        0=>'resume.doc'),
    'reel'=>array(
        0=>'reel.mov')
    )

the array looks okay when i print it to console using this dump function. i tried figuring out how to get this to work with objects because i thought i read something that said objects were already JSON friendly, but since i'm not super familiar with javascript i was pretty much floundering about.

edit: some more details... the declaration of my array (when i had it working) was something like this, although i may have messed up:

var fileArray = [];
fileArray['image'] = [];
fileArray['resume'] = [];
fileArray['reel'] = [];

var type;
var name;

var divs = $("#upload-container").children('div');

$.each(divs, function() {
    type = $(this).attr('id');
    name = $(this).html();

    fileArray[type].push(name);
});

Answer 1

The object for that array structure might look like this in JavaScript:

var objects = 
[
    {
        'image': [
            { '0': 'hello.jpeg' },
            { '1': 'goodbye.jpeg' },
            { '2': 'etc.jpeg' }
        ]
    },
    {
        'resume': [
            { '0': 'resume.doc' }
        ]
    },
    {
        'reel': [
            { '0': 'reel.mov' }
        ]
    }
]

So now you've got an array of three objects, each of which contains a property (image, resume, reel) that is another array of objects with basically key:value pairs ( '0':'hello.jpeg' ). Maybe you could simplify it by not bothering to use the indexes:

var objects = 
[
    {
        'image': [ 'hello.jpeg', 'goodbye.jpeg', 'etc.jpeg' ]
    },
    {
        'resume': [ 'resume.doc' ],
    },
    {
        'reel': [ 'reel.mov' ]
    }
]

Then you can use JSON.stringify(objects) to pass to your PHP action.

Answer 2

Your sample expected output on the PHP side has an associative array containing numeric arrays. JavaScript arrays have numeric indexes: if you want strings as keys use a plain object rather than an array because JavaScript objects act like the associative arrays you are thinking of from PHP. The corresponding JavaScript object should look like this:

var fileArray = {
  'image' : [ 'hello.jpeg',
             'goodbye.jpeg',
             'etc.jpeg'],
  'resume' : [ 'resume.doc' ],
  'reel' : [ 'reel.mov' ]
};

In the arrays defined with square brackets the numeric indexes are implied. Note that fileArray is defined with curly braces not square brackets and so is not an array (in spite of its name). This still allows you to use the fileArray['image'] = ... syntax if you want to set the properties one at a time:

var fileArray = {}; // an object, not an array
fileArray['image'] = [];
fileArray['resume'] = [];
fileArray['reel'] = [];  

Note that the curly brackets in the initial declaration make it an object but properties are still accessed with square bracket syntax.

The way you were defining fileArray as a JavaScript array with square brackets still allows you to add string-based key properties because arrays are objects, but JSON stringify routines may ignore those properties and only serialise the numerically indexed properties.