Javascript Create JSON Hash Array for jQuery AJAX

Question

I am desperately trying to manually create a JSON-style array in Javascript to send over the network via jQuery's AJAX method.

var fieldsobj = {fields:[]}
$(".fact_field", fact).each(function(index, field){
    var index  = $(field).attr("data-index");
    var name  = $(".fact_field_label", field).text().trim();
    var value  = $(".fact_field_value", field).text().trim();
    fieldsobj["fields"].push({index:index, name:name, value:value});
});
//...
$.ajax({
    type: 'PUT',
    url: url,
    data: fieldsobj,
    success: function(data){...
    },
    complete: function(){...
    }
});

What I want is the following:

{fields => [{index:0, name:1, value:2},{...},{...}]}

What I get is this:

 {"fields"=>{"0"=>{...}, "1"=>{..}, "2"=>{...}, "3"=>{...}}

What am I doing wrong?

Answer 1

When you pass an object as the data property, jQuery will pass it as url-encoded form parameters (e.g. foo=bar&moo=too) in the body. I think what you want is to pass JSON through the body.

Grab the json2.js written by uncle Crockford and use JSON.stringify (that library provides the functionality for browsers that still don't support it):

$.ajax({
    type: 'PUT',
    url: url,
    data: JSON.stringify(fieldsobj),
    contentType: "application/json",
    success: function(data){...
    },
    complete: function(){...
    }
});

And don't forget to set the contentType property! On the PHP side, you can use json_decode to decode the raw body content:

$fieldsobj = json_decode(@file_get_contents('php://input'));