send list of object key and value via $.post in jquery

Question

I want to send all data (which is in object form containing key, value) to server using jquery $.post. Below is the code.

/* DATA FOR HEADER --- I have created a list of key value pair in variable **arr** */
    var headerKey = Array();
        $.each( $(".headerParamsContainer .headerKey") , function(index, value){
            headerKey[headerKey.length] = $(value).val();
    });

    var headerValue = Array();
        $.each( $(".headerParamsContainer .headerValue") , function(index, value){
        headerValue[headerValue.length] = $(value).val();
    });

    var arr = []; 
    $.each( headerKey, function(index, value){
        var tempObj = {};
        tempObj[headerKey[index]] = headerValue[index];
        arr.push(tempObj);
    });

Now I am trying to send this to server but not working..

     $("#createCall").submit(function(event) {
          event.preventDefault();
          var $form = $( this ),
                url = $form.attr( 'action' );
          var posting = $.post( url, { 
              code: $('#code').val(),  
              viewName: $('#viewName option:selected').val(), 
              getHeaderParams: $.parseJSON(arr) 
          });

          posting.done(function( data ) { });
        });

Answer 1

You misuse that array, there are no key - value arrays in JavaScipt, see here.

You should use this piece of code:

var obj = {};

$.each( headerKey, function(index, value){
    obj[headerKey[index]] = headerValue[index];
});

Then you can serzialize it and send the JSON to your server.