JSON 到 HTML：根据 JSON 字段值制作模板（仅限 ES6）

Question

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

我已经走了很远，但我遇到了 Level 6（表单模板）和 Level 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 等内部执行的操作...在传入的 string 上执行.map ...字符串不会有一个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("");