JSFiddle - React, Tailwind, and code Playground
by Steven Senkus
JavaScript
function getFormNameFromListWithStrAddr(strAddr, formList) {
const foundForm = _.find(formList, form => form.id.strAddr === strAddr);
if (!foundForm || !(foundForm && foundForm.id && foundForm.id.name)) {
throw new Error(`Cannot find form by strAddr: ${strAddr}`);
}
return foundForm.id.name;
}
function generateHierarchyListHtml(hierarchyObj, formList) {
function generateChildListHtml(hierarchyObject) {
let outputHtml = '';
outputHtml += '<ul>';
Object.keys(hierarchyObject).forEach((strAddr) => {
outputHtml += '<li>';
const childFormName = getFormNameFromListWithStrAddr(strAddr, formList);
outputHtml += childFormName;
const hasGrandchildren = !!hierarchyObject[strAddr];
if (hasGrandchildren) {
outputHtml += generateChildListHtml(hierarchyObject[strAddr], strAddr);
}
outputHtml += '</li>';
});
outputHtml += '</ul>';
return outputHtml
}
console.log('@@@\n', JSON.stringify(hierarchyObj, null, 4));
const formChildren = Object.keys(hierarchyObj);
let outputHtml = '';
if (formChildren) {
outputHtml = '<ul>';
Object.keys(hierarchyObj).forEach((strAddr) => {
outputHtml += '<li>';
const formName = getFormNameFromListWithStrAddr(strAddr, formList);
outputHtml += formName;
const hasChildren = !!hierarchyObj[strAddr];
if (hasChildren) {
outputHtml += generateChildListHtml(hierarchyObj[strAddr], strAddr);
}
outputHtml += '</li>';
});
outputHtml +=...