Convert javascript object or array to json for ajax data

Question

So I'm creating an array with element information. I loop through all elements and save the index. For some reason I cannot convert this array to a json object!

This is my array loop:

var display = Array(); $('.thread_child').each(function(index, value){    display[index]="none";    if($(this).is(":visible")){       display[index]="block";    } }); 

I try to turn it into a JSON object by:

data = JSON.stringify(display); 

It doesn't seem to send the proper JSON format!

If I hand code it like this, it works and sends information:

data = {"0":"none","1":"block","2":"none","3":"block","4":"block","5":"block","6":"block","7":"block","8":"block","9":"block","10":"block","11":"block","12":"block","13":"block","14":"block","15":"block","16":"block","17":"block","18":"block","19":"block"}; 

When I do an alert on the JSON.stringify object it looks the same as the hand coded one. But it doesn't work.

I'm going crazy trying to solve this! What am I missing here? What's the best way to send this information to get the hand coded format?

I am using this ajax method to send data:

$.ajax({         dataType: "json",         data:data,         url: "myfile.php",         cache: false,         method: 'GET',         success: function(rsp) {             alert(JSON.stringify(rsp));         var Content = rsp;         var Template = render('tsk_lst');         var HTML = Template({ Content : Content });         $( "#task_lists" ).html( HTML );         }     }); 

Using GET method because I'm displaying information (not updating or inserting). Only sending display info to my php file.

---

END SOLUTION

---

var display = {}; $('.thread_child').each(function(index, value){    display[index]="none";    if($(this).is(":visible")){       display[index]="block";    } });  $.ajax({         dataType: "json",         data: display,         url: "myfile.php",         cache: false,         method: 'GET',         success: function(rsp) {             alert(JSON.stringify(rsp));         var Content = rsp;         var Template = render('tsk_lst');         var HTML = Template({ Content : Content });         $( "#task_lists" ).html( HTML );         }     }); 

Answer 1

I'm not entirely sure but I think you are probably surprised at how arrays are serialized in JSON. Let's isolate the problem. Consider following code:

var display = Array(); display[0] = "none"; display[1] = "block"; display[2] = "none";  console.log( JSON.stringify(display) ); 

This will print:

["none","block","none"] 

This is how JSON actually serializes array. However what you want to see is something like:

{"0":"none","1":"block","2":"none"} 

To get this format you want to serialize object, not array. So let's rewrite above code like this:

var display2 = {}; display2["0"] = "none"; display2["1"] = "block"; display2["2"] = "none";  console.log( JSON.stringify(display2) ); 

This will print in the format you want.

You can play around with this here: http://jsbin.com/oDuhINAG/1/edit?js,console