JSON в HTML: создавать шаблоны в зависимости от значения поля JSON (только ES6)

form.inputType['text'] ? textfieldTEMPLATE(form.inputType) : ''

проблема здесь в том, что form.inputType имеет строковое значение .. text | select и т. д. ... но этот код проверяет, есть ли у form.inputType свойство с именем text ... это не так...

Итак, возможно, вы хотите form.inputType == 'text' ? textfieldTEMPLATE(form.inputType) : ''

Тем не менее, это только одна проблема решена... другая - это то, что вы делаете внутри textfieldTEMPLATE и т. д.... выполняя .map для переданной строки... строки не имеют метода сопоставления

Итак, вы хотите изменить следующее: обратите внимание, функции *TEMPLATE вызываются с параметром form, а не form.inputType, потому что form — это object с полезными свойствами для создания элементов, тогда как form.inputType — это строка, которая не помогает для того, что вы хотите сделать

function formTEMPLATE(form) {
    return `${form.map(function(form) {
        return `
            ${form.inputType == 'text' ? textfieldTEMPLATE(form) : ''}
            ${form.inputType == 'select' ? selectTEMPLATE(form) : ''}
            ${form.inputType == 'radio' ? radioTEMPLATE(form) : ''}
            ${form.inputType == 'checkbox' ? checkboxTEMPLATE(form) : ''}
        `}
    ).join('')}`;
}

function textfieldTEMPLATE(text) {
    return `
        <label>${text.labelText}</label>
        <input type="${text.inputType}" id="${text.inputId} name="${text.inputClass}">
        <br />
    `;
}

function selectOptionTEMPLATE(options) {
    return options.inputCollection.map(function(option) {
        return `<option id="${option.collectionInputId} name="${option.collectionInputName}" ${option.collectionInputOption || ''}">${option.collectionLabelText}</option>`
    }).join('');
}

function selectTEMPLATE(select) {
    return `<select class="select">${selectOptionTEMPLATE(select)}</select>`;
}

function cbRadioTEMPLATE(x) {
    return x.inputCollection.map(function(input) {
        return `<li>
            <input type="${x.inputType}" id="${input.collectionInputId}" name="${input.collectionInputName}" ${input.collectionInputOption || ''}>
            <label for="${input.collectionInputId}">${input.collectionLabelText}</label>
        </li>`;
    }).join('');
}

function radioTEMPLATE(radio) {
    return `<ul class="radio">${cbRadioTEMPLATE(radio)}</ul>`;
}

function checkboxTEMPLATE(checkbox) {
    return `<ul class="checkbox">${cbRadioTEMPLATE(checkbox)}</ul>`;;
}

Обратите внимание на функцию function cbRadioTEMPLATE(x) — потому что и флажок, и переключатель используют этот код для «списка» полей — код DRY FTW: p

Посмотрите, как это работает, на странице https://codepen.io/anon/pen/xWpqRw.

используя функции стрелок, приведенный выше код можно упростить до

const formTEMPLATE = form => form.map(item => `
  ${item.inputType == "text" ? textfieldTEMPLATE(item) : ""}
  ${item.inputType == "select" ? selectTEMPLATE(item) : ""}
  ${item.inputType == "radio" ? radioTEMPLATE(item) : ""}
  ${item.inputType == "checkbox" ? checkboxTEMPLATE(item) : ""}
`).join("");

const textfieldTEMPLATE = text => `<label>${text.labelText}</label><input type="${text.inputType}" id="${text.inputId} name="${text.inputClass}"><br/>`;

const selectOptionTEMPLATE = options => options.inputCollection.map(option => `
  <option id="${option.collectionInputId} name="${option.collectionInputName}" ${option.collectionInputOption || ""}">${option.collectionLabelText}</option>
`).join("");

const selectTEMPLATE = select =>`<select class="select">${selectOptionTEMPLATE(select)}</select>`;

const cbRadioTEMPLATE = x => x.inputCollection.map(input => `
  <li><input type="${x.inputType}" id="${input.collectionInputId}" name="${input.collectionInputName}" ${input.collectionInputOption || ""}>
    <label for="${input.collectionInputId}">${input.collectionLabelText}</label>
  </li>
`).join("");

const radioTEMPLATE = radio => `<ul class="radio">${cbRadioTEMPLATE(radio)}</ul>`;

const checkboxTEMPLATE = checkbox =>`<ul class="checkbox">${cbRadioTEMPLATE(checkbox)}</ul>`;

И еще одна оптимизация

const typeMap = {
  text: textfieldTEMPLATE,
  select: selectTEMPLATE,
  radio: radioTEMPLATE,
  checkbox: checkboxTEMPLATE
};
const formTEMPLATE = form => form.map(item => `${typeMap[item.inputType](item)}`).join("");