javascript - JSON 到 HTML : Make Templates depending on JSON field value (ES6 only)

Question

我正在尝试使用 .map() 迭代嵌套的 JSON 对象，并根据 JSON inputType: "value"输出不同的 HTML 模板 。我想使用基于三元运算符的正确模板(es6模板文字)并将正确的HTML标记到DOM。

我已经取得了很大的进展，但我遇到了第 6 级(表单模板)和第 7 级(输入模板)的问题。谁能指出我正确的方向？

Codepen: https://codepen.io/oneezy/pen/GxENOr

JS(省略了完整的 javascript。请参阅 codepen )

/* FORM (Level 6)
⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼ */
function formTEMPLATE(form) {
  return `
  ${form.map(function(form) {
    return `
      ${form.inputType['text'] ? textfieldTEMPLATE(form.inputType) : ''}
      ${form.inputType['select'] ? selectTEMPLATE(form.inputType) : ''}
      ${form.inputType['radio'] ? radioTEMPLATE(form.inputType) : ''}
      ${form.inputType['checkbox'] ? checkboxTEMPLATE(form.inputType) : ''}
    `}).join('')}`
}


/* ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ INPUT TEMPLATES ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ */


/* TEXTFIELDS (Level 7)
⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼ */
function textfieldTEMPLATE(text) {
  return `
    ${text.map(function(text) {
     return `
        <label>${text.labelText}</label>
        <input type="${text.inputType}" id="${text.inputId} name="${text.inputClass}">
    `}).join('')}`
}

/* SELECT MENU (Level 7)
⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼ */
function selectTEMPLATE(select) {
  return `
  <select class="select">
      ${select.map(function(select) {
       return `
          <option id="${select.inputID} name="${select.inputGROUP}" ${select.inputOPTION}">${select.inputLABEL}</option>
      `}).join('')}
  </select>`
}

/* RADIO (Level 7)
⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼ */
function radioTEMPLATE(radio) {
  return `
  <ul class="radio">
      ${radio.map(function(radio) {
       return `
        <li>
          <input type="${radio.inputTYPE}" id="${radio.inputID}" name="${radio.inputGROUP}" ${radio.inputOPTION}>
          <label for="${radio.inputID}">${radio.inputLABEL}</label>
        </li>
      `}).join('')}
  </ul>` 
}

/* CHECKBOX (Level 7)
⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼ */
function checkboxTEMPLATE(checkbox) {
  return `
  <ul class="checkbox">
      ${checkbox.map(function(checkbox) {
       return `
        <li>
          <input type="${checkbox.inputTYPE}" id="${checkbox.inputID}" name="${checkbox.inputGROUP}" ${checkbox.inputOPTION}>
          <label for="${checkbox.inputID}">${checkbox.inputLABEL}</label>
        </li>
      `}).join('')}
  </ul>`
}

JSON(省略了完整的 json..请参阅 codepen )

[
  {
    "appLabel": "App",
    "appFolders": [
      {
        "folderLabel": "Folder",
        "folderFiles": [
          {
            "fileLabel": "File",
            "fileSections": [
              {
                "sectionLabel": "Select Menu",
                "sectionGroups": [
                  {
                    "groupLabel": "Group",
                    "groupInputs": [
                      {
                        "labelText": "Select 1",
                        "inputType": "select",
                        "inputId": "select1",
                        "inputClass": "select-1",
                        "inputCollection": [
                          {
                            "collectionLabelText": "Option 1",
                            "collectionInputType": "select",
                            "collectionInputId": "option1",
                            "collectionInputClass": "option-1",
                            "collectionInputName": "select-name-1"
                          },

Answer 1

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

这里的问题是 form.inputType 有一个字符串值.. text | select 等...但是该代码检查 form.inputType 是否有一个名为 text 的属性 ...不...

那么，也许您想要 form.inputType == 'text' ？ textfieldTEMPLATE(form.inputType) : ''

但是，这只是解决了一个问题...另一个问题是您在 textfieldTEMPLATE 等中所做的事情...在传入的字符串上执行 .map ...字符串没有映射方法

因此，您要进行如下更改:注意，使用参数 form 调用 *TEMPLATE 函数，而不是 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) - 因为复选框和单选按钮都使用该代码作为框的“列表” - 干燥代码 FTW :p

查看它的工作情况:https://codepen.io/anon/pen/xWpqRw

using arrow functions the above code can be simplified to

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("");