JSON ajax SyntaxError: JSON.parse: unexpected character

Question

All I am trying to do is to build an object from the input elements typed in by the user without them clicking submit. These functions supposed to do the job, except I am not getting the $_POST array correctly at the host page:

I started out thinking I can create a simple json object and stringify it then ajax it as a 'json' datatype. That did not work. I kept getting parser errors, 'unexpected character ..'. I used an outside parser to check the generated object, and it was valid every time. So I modified my serialization to create a jquery.param object as you see below.

The output in console.log looks like this:

 [ [{ hostname: 'myhostname'}, {userdb1:'mydbname'}, {adminname:'guest'}, {adminpassword:'abc123'}, {username:'muuser'}, {password:'myuser'} ] 

The var_dump[$_POST] at the host is this:

  Array ( [0] => [ [1] => { [2] => [3] => h [4] => o [5] => s [6] => t [7] => n [8] => a [9] => m [10] => e [11] => : [12] => [13] => ' [14] => m [15] => y [16] => h [17] => o [18] => s [19] => t [20] => n [21] => a [22] => m [23] => e [24] => ' [25] => } [26] => , [27] => [28] => { [29] => u [30] => s [31] => e [32] => r [33] => d [34] => b [35] => 1 [36] => : [37] => ' [38] => m [39] => y [40] => d [41] => b [42] => n [43] => a [44] => m [45] => e [46] => ' [47] => } [48] => , [49] => [50] => { [51] => a [52] => d [53] => m [54] => i [55] => n [56] => n [57] => a [58] => m [59] => e [60] => : [61] => ' [62] => g [63] => u [64] => e [65] => s [66] => t [67] => ' [68] => } [69] => , [70] => [71] => { [72] => a [73] => d [74] => m [75] => i [76] => n [77] => p [78] => a [79] => s [80] => s [81] => w [82] => o [83] => r [84] => d [85] => : [86] => ' [87] => a [88] => b [89] => c [90] => 1 [91] => 2 [92] => 3 [93] => ' [94] => } [95] => , [96] => [97] => { [98] => u [99] => s [100] => e [101] => r [102] => n [103] => a [104] => m [105] => e [106] => : [107] => ' [108] => m [109] => u [110] => u [111] => s [112] => e [113] => r [114] => ' [115] => } [116] => , [117] => [118] => { [119] => p [120] => a [121] => s [122] => s [123] => w [124] => o [125] => r [126] => d [127] => : [128] => ' [129] => m [130] => y [131] => u [132] => s [133] => e [134] => r [135] => ' [136] => } [137] => [138] => ] ) 

what is going on here. need to get a $_POST array of these key/value simple user created object without form serialization!

Here are the functions

    function savePageInputs(idtags,targetOutId)
    {
        var method = 'post';
        var phpscript = 'savedata.php';
        var data = new Array();
        for(var i=0;i<idtags.length;i++)
        {
            tag = idtags[i];
            data[i] = $(\"#\"+tag).val(); //get their values
        }

        jsonData = makeJsonData(idtags,data); //make JSON object
        shipJsonToHost(jsonData, phpscript, method, targetOutId);
    }
    function makeJsonData(idtags,values)
    {
        tag = idtags[0];
        val = values[0];
        jsonData =  '[{ '+ tag +': '+'\''+val+'\'}' ;
        for(var i=1;i<idtags.length;i++)
        {                                
            tag = idtags[i];
            val = valueList[i];
            jsonData += ', {' + tag+':'+ '\''+val+'\'}' ;
        }
        jsonData +=  ' ]' ;    
        return jsonData;
    }
    function shipJsonToHost(jsonData, phpscript, method, targetOutId)
    {
        jQuery.ajaxSettings.traditional = true;
        var outputTo = $(\"#\"+targetOutId);
        outputTo.append('<center>Processing...<br/> <img src=\"images/loading.gif\" height=50 width=50></center>');
        $.ajax
        (
            { 
                data: $.param(jsonData) ,
                type: method, 
                dataType: 'text',
                url: phpscript, 
                success: function(response) 
                {                         
                    outputTo.empty();
                    outputTo.append(response);
                },  
                error: function(request, errorType, errorThrown)
                {                
                    outputTo.html('Error: '+errorType+ ' '+errorThrown);
                }
           }
        );  
    }

Answer 1

Do not forget the actual syntax of the json

• [{test: 1}] is invalid
• [{'test': 1}] is invalid
• [{"test": 1}] is Valid
• [{"value": 'test'}] is invalid
• [{"value": "test"}] is valid

try to replace all your single quotes in your makeJsonData function by some double quotes; usually that does the trick