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 );
        }
    });

Console.log the your data var. data = JSON.stringify(display); console.log(data); And see what you are getting. — Nick M, Nov 14 '13 at 5:38
["block","block","block","block","block","block","block","block","block","block"‌,"block","block","block","block","block","block","block","block","block","block"] Its missing the numbers.. "0":"block","1":"block"... — Christine Wilson, Nov 14 '13 at 5:47

ShitalShah · Accepted Answer · 2013-11-14 05:49:00Z

up vote 17 down vote accepted

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

answered Nov 14 '13 at 5:49

ShitalShah
2,7862018

OMG! Thank you :) – Christine Wilson Nov 14 '13 at 5:54

So you do all this.. then you don't convert anything! data: display2, dataType: "json" and it all works – Christine Wilson Nov 14 '13 at 5:55

When you work with objectw and have numeric index, then you don't have to put them in quotes. i.e. display2[0] = "none" is enough – instead Mar 3 at 12:17

add a comment |

JVE999 · Answer 2 · 2014-07-14 18:38:48Z

You can use JSON.stringify(object) with an object and I just wrote a function that'll recursively convert an array to an object, like this JSON.stringify(convArrToObj(array)), which is the following code (more detail can be found on this answer):

// Convert array to object
var convArrToObj = function(array){
    var thisEleObj = new Object();
    if(typeof array == "object"){
        for(var i in array){
            var thisEle = convArrToObj(array[i]);
            thisEleObj[i] = thisEle;
        }
    }else {
        thisEleObj = array;
    }
    return thisEleObj;
}

To make it more generic, you can override the JSON.stringify function and you won't have to worry about it again, to do this, just paste this at the top of your page:

// Modify JSON.stringify to allow recursive and single-level arrays
(function(){
    // Convert array to object
    var convArrToObj = function(array){
        var thisEleObj = new Object();
        if(typeof array == "object"){
            for(var i in array){
                var thisEle = convArrToObj(array[i]);
                thisEleObj[i] = thisEle;
            }
        }else {
            thisEleObj = array;
        }
        return thisEleObj;
    };
    var oldJSONStringify = JSON.stringify;
    JSON.stringify = function(input){
        return oldJSONStringify(convArrToObj(input));
    };
})();

And now JSON.stringify will accept arrays or objects! (link to jsFiddle with example)

Edit:

Here's another version that's a tad bit more efficient, although it may or may not be less reliable (not sure -- it depends on if JSON.stringify(array) always returns [], which I don't see much reason why it wouldn't, so this function should be better as it does a little less work when you use JSON.stringify with an object):

(function(){
    // Convert array to object
    var convArrToObj = function(array){
        var thisEleObj = new Object();
        if(typeof array == "object"){
            for(var i in array){
                var thisEle = convArrToObj(array[i]);
                thisEleObj[i] = thisEle;
            }
        }else {
            thisEleObj = array;
        }
        return thisEleObj;
    };
    var oldJSONStringify = JSON.stringify;
    JSON.stringify = function(input){
        if(oldJSONStringify(input) == '[]')
            return oldJSONStringify(convArrToObj(input));
        else
            return oldJSONStringify(input);
    };
})();

jsFiddle with example here

js Performance test here, via jsPerf

This works really well. Thank you for sharing this solution. — Ty Bailey, Jul 14 at 13:57

LittleDragon · Answer 3 · 2013-11-14 05:57:19Z

here is the other way with example

        var name = $("#fullname").val();
        var age = $("#age").val();
        var email = $("#email").val();
        var city = $("#city").data("kendoComboBox");
        var date = $("#date").val();



        var Data = JSON.stringify({ Name: name, Age: age, Email: email, City: city.text(), Date: date });

        alert(Data);


        $.ajax({
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            url: 'RegFrm.aspx/InsertMethod',
            // data: "{'Name':'" + document.getElementById('fullname').value + "', 'Age':'" + document.getElementById('age').value + "'}",      
            data: Data,
            async: false,

            success: function (response) {
                alert("Record Has been Saved in Database");
            },

            error: function ()
            { console.log('there is some error'); }
        });

Thank DjAdmin. I find it easier to pass separate fields and then JSON stringify. It's when I need to use an array, this stops working. I realized I needed to use an object and not an array in the end. — Christine Wilson, Nov 14 '13 at 22:22

Jayantha · Answer 4 · 2013-11-14 05:46:27Z

up vote -1 down vote

You can do var Content = JSON.parse(rsp);

edited Nov 14 '13 at 5:46

answered Nov 14 '13 at 5:38

Jayantha
11.1k42654

The parse method takes a string and parses it into an object or array. The op has an array already. – Guffa Nov 14 '13 at 5:43

Ah yes my mistake... – Jayantha Nov 14 '13 at 5:45

add a comment |

asked	10 months ago
viewed	34994 times
active	2 months ago

current community

your communities

more stack exchange communities

Convert javascript object or array to json for ajax data

4 Answers 4

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript arrays json data stringify or ask your own question.

Visit Chat

Linked

Hot Network Questions

current community

your communities

more stack exchange communities

Convert javascript object or array to json for ajax data

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript arrays json data stringify or ask your own question.

Visit Chat

Linked

Related

Hot Network Questions