JSFiddle - React, Tailwind, and code Playground

by Ben Alman

HTML

<div id="lookie"></div>
<div id="console"></div>

CSS

#lookie { color: green; margin-bottom: 1em; }

JavaScript

var params = {
    obj1: {
        key1:'val1', 
        key2:'val2'
    },
    obj2: {
        key1:'val1', 
        key2: {
            nest1:'val1', 
            nest2:'val2', 
            nest3:'val3'}
    },
    obj3: {
        key1:'val1', 
        key2: {
            nest1: {
                prop1: 'test',
                prop2: 'test2',
            }
        }
    }
};


// =============================================
// JUST DO THIS:
// =============================================

var props = $.param(params);

var arr = $.map(props.split('&'), function( val ) {
    var parts = val.split('=');
    return {
        name: decodeURIComponent(parts[0]),
        value: decodeURIComponent(parts[1])
    };
});

$.each(arr, function() { 
    $('#lookie').append($(this)[0].name 
        + ' ' + $(this)[0].value+ '<br/>');
});


// Your original code.

var myFlatArray = [];
testParam(params, false, function( key, value ) {
    value = $.isFunction( value ) ? value() : value;
    myFlatArray.push({ name: key, value: value });
});

$.each(myFlatArray, function() { 
    $('#console').append($(this)[0].name 
        + ' ' + $(this)[0].value+ '<br/>');
    // We could create inputs and attach them to a form
    // in order to Post it
});

// Serialize an array of form elements or a set of
// key/values into a query string
// Same as Jquery param function
function testParam( a, traditional, addFunction ) {

    var r20 = /%20/g,
     rbracket = /\[\]$/;
    
    var s = [];
    
    if (addFunction === undefined) {
        var add = function( key, value ) {
            // If value is a function, invoke it and return its value
            value = $.isFunction( value ) ? value() : value;
            s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
        };
    } else if ($.isFunction( addFunction )) {
        var add = addFunction;
    }

    // Set traditional to true for jQuery <= 1.3.2 behavior.
    if ( traditional === undefined ) {
 ...