JSFiddle - React, Tailwind, and code Playground

by Mike McCaughan

HTML

<form>
    <input name="Criteria.Statuses[0].Count" type="hidden" value="9" />
    <input name="Criteria.Statuses[0].IsChecked" type="hidden" value="false" />
    <input name="Criteria.Statuses[0].Amount" type="hidden" value="9" />
    <input name="Criteria.Statuses[0].Key" type="hidden" value="SoldNotReleased" />
    <input name="Criteria.Statuses[1].Count" type="hidden" value="9" />
    <input name="Criteria.Statuses[1].IsChecked" type="hidden" value="false" />
    <input name="Criteria.Statuses[1].Amount" type="hidden" value="9" />
    <input name="Criteria.Statuses[1].Key" type="hidden" value="CancelSaveInProgress" />
</form>

<ul id="debug"></ul>

JavaScript

function assignByPath(obj, path, value) {
    var currentPath = path.shift(),
        segment = currentPath.segment,
        isArray = currentPath.isArray,
        index = parseInt(currentPath.arrayIndex || '0', 10);
    if (path.length === 0 && !isArray) {
    debug(segment);
        obj[segment] = value;
        return obj;
    } else if (!obj[segment]) {
        obj[segment] = isArray ? [] : {};
    } 
    if (isArray && !obj[segment][index]) {
        obj[segment][index] = {};
    }
    if (isArray) {
        return assignByPath(obj[segment][index], path, value);
    }
    
    return assignByPath(obj[segment], path, value);
}
function serializeToObject(formselector) {
    var $form = $(formselector),
        elements = $form.serializeArray(),
        result = {};
    $.each(elements, function (index, element) {
				var name = element.name,
					value = element.value,
					matches = /(\w+)(\[(\d+)\])?\.?/.exec(name),
					remaining = name,
					part,
					segment,
					isArray,
					arrayIndex,
					path = [];
				if (!matches || matches.length !== 4) {
                    debug('no matches');
					return false;
				}

				while (remaining.length > 0) {
                    matches = /(\w+)(\[(\d+)\])?\.?/.exec(remaining);
					part = matches[0];
					segment = matches[1];
					isArray = matches[2] !== undefined;
					arrayIndex = matches[3];
                    debug(segment);
					path.push({ segment: segment, isArray: isArray, arrayIndex: arrayIndex });
					remaining = remaining.substring(remaining.indexOf(part) + part.length);
				}
        result = assignByPath(result, path, value);
    });
    return result;
}
function debug(expression) {
    $('#debug').append('<li>' + expression + '</li>');
    console.log(expression);
}
debug(serializeToObject('form'));