JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

JavaScript

const forms = [
    'B',
    'C',
    'C:F',
    'D',
    'D:G',
    'D:H',
    'D:H:I',
    'E',
    "J:K:L:M:N:O:P"
];

function generateFormHierarchy(list) {

    return list.reduce((accum, item) => {
        const itemAsArr = item.split(':');
        const hierarchy = itemAsArr.reduceRight((value, key, index, arr) => {
			const hierarchyKey = arr.slice(0, index + 1).join(':');

            return {
                [hierarchyKey]: value
            }
        }, null);
        return _.merge(accum, hierarchy)
    }, {});
}

const output = '<pre>' + JSON.stringify(generateFormHierarchy(forms), null, 4) + '</pre>'; 
document.body.innerHTML = output;