JSFiddle - React, Tailwind, and code Playground
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 with space'}
},
obj3: {
key1:'val1',
key2: {
nest1: {
prop1: 'test=1',
prop2: 'test:"2"',
}
}
}
};
// =============================================
// 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 ===...