将数据从JavaScript数组传递到HTML表单

我正在努力学习JavaScript，在我购买的一本书中遇到了一个练习问题，我似乎无法解决。任务是充实javascript formBuilder函数，从javascript数组动态生成HTML表单。我已经将书中的代码复制到了一个代码笔页面上，用于视觉和测试目的

代码笔：

HTML示例：

<div>
  <button data-sample='1'>Run 1</button>
  <button data-sample='2'>Run 2</button>
  <button data-sample='3'>Run 3</button>
</div>

<hr>
<div id='spec'>
  <i>This div will display the currently-processed spec</i>
</div>
<br>Output:
<div id='result'>
  <i>I sure wish I had a cool html form in me...</i>
</div>

<!--here are some test cases in docblock form-->
<div class='testcase' id='1'>
  /** Comment Form
     * Make a comment on the blog post!
     * @param  string[100] title
     * @param  email email
     * @param  text body
     * @param  bool subscribe Email me when someone comments on my comment!
     */
</div>

formBuilder示例：

//builds an HTML form using all information present in `spec` and places the resulting HTML in jquery element `$el`
function formBuilder(spec,$el){
  $el.html("<i>I still wish I had a cool html form in me...</i>");
}


$("button").on("click",function($e){
  var specIndex = $($e.target).data('sample');
  var specData = samples[specIndex-1];

  $("#spec").html("Sample spec "+(specIndex)+" looks like: <br>"+JSON.stringify(specData));

  formBuilder(specData, $("#result"));
});

//使用“spec”中的所有信息构建HTML表单，并将生成的HTML放入jquery元素“$el”中`
函数formBuilder（规范$el）{
$el.html（“我还是希望我有一个很酷的html表单……”）；
}
$（“按钮”）。在（“单击”）上，函数（$e）{
var specIndex=$（$e.target）.data（'sample'）；
var specData=样本[specIndex-1]；
$（“#spec”）.html（“样本规范”+（specIndex）+”看起来像：
“+JSON.stringify（specData））；
formBuilder（specData，$（“#结果”）；
});

如果代码中存在错误，请将以下代码粘贴到项目中：

var samples = [
{
    title:"Comment Form",
    desc:"Make a comment on the blog post!",
    params:[
      { 
        type: 'text',
        max_length: 100,
        name: 'title'
      },
      {
        type: 'email',
        name: 'email'
      },
      {
        type:'textarea',
        name:'body'
      },
      {
        type:'checkbox',
        name:'subscribe',
        label:'mail me when someone comments on my comment!'
      }
    ]
  },
  {
    title:"Car Order Form",
    desc:"Choose your car!",
    params:[
      { 
        type:'select',
        values:['red','blue','green','black','white','taupe'],
        name: 'color'
      },
      {
        type: 'checkbox',
        values:['fog-lights','radio','a-c','wheels','headlights'],
        name: 'options'
      },
      {
        type:'string',
        minLength:7,
        maxLength:7,
        name:'vanityPlate',
        optional:true
      },
      {
        type:'int',
        name:'price',
      }
    ]
  },
  {
    title:"New User Creator",
    desc:"Create a new user account",
    params:[
      { 
        type:'string',
        maxLength:20,
        name:'fname',
        label:'First Name'
      },
      { 
        type:'string',
        maxLength:20,
        name:'lname',
        label:'Last Name'
      },
      { 
        type:'date',
        name:'dob',
        label:'Date of Birth'
      },
      {
        type:'email',
        multiple:true,
        maxCount:4,
        name:'emails',
        label:'Email Addresses'
      },
      {
        type: 'string',
        name: 'addr1',
        label: 'Street Address'
      },
      {
        type: 'string',
        name: 'city'
      },
      {
        type: 'state',
        name: 'state',
      },
      {
        type: 'int',
        name: 'zipcode',
        maxValue: 99999,
        minValue: 0,
        label: 'ZIP'
      },
    ]
  }
]

//builds an HTML form using all information present in `spec` and places the resulting HTML in jquery element `$el`
function formBuilder(spec,$el){
  var inputs = getInputs(spec);
  $el.html("<form title='"+spec.title+"'><fieldset><legend>"+spec.desc+"</legend>"+inputs+"</fieldset></form>");
}

function getInputs(spec) {
  var inputs = "";
  for(var i = 0; i < spec.params.length; i++) {
    var input = "<input ";
    var attributes = JSON.stringify(spec.params[i]).split(",");
    console.log(attributes);
    for(var j = 0; j < attributes.length; j++) {
      $.each(spec.params[i], function(key, value) {
        input += key + "='" + value + "' ";
      });
    }
    inputs += input + "/><br/>";
  }
  return inputs;
}


$("button").on("click",function($e){
  var specIndex = $($e.target).data('sample');
  var specData = samples[specIndex-1];

  $("#spec").html("Sample spec "+(specIndex)+" looks like: <br>"+JSON.stringify(specData));

  formBuilder(specData, $("#result"));
});

var样本=[
{
标题：“评论表”，
描述：“在博客上发表评论！”，
参数：[
{ 
键入：“文本”，
最大长度：100，
姓名：'头衔'
},
{
键入：“电子邮件”，
名称：“电子邮件”
},
{
类型：'textarea'，
姓名：'body'
},
{
类型：'checkbox'，
名称：'订阅'，
标签：“当有人对我的评论发表评论时，给我发邮件！”
}
]
},
{
标题：“汽车订单”，
描述：“选择你的车！”，
参数：[
{ 
类型：'select'，
值：[“红色”、“蓝色”、“绿色”、“黑色”、“白色”、“灰褐色”]，
名称：“颜色”
},
{
键入：“复选框”，
值：[“雾灯”、“收音机”、“空调”、“车轮”、“前照灯”]，
名称：“选项”
},
{
类型：'string'，
最小长度：7，
最大长度：7，
名称：'vanityPlate'，
可选：true
},
{
类型：'int'，
名称：'价格'，
}
]
},
{
标题：“新用户创建者”，
desc:“创建新用户帐户”，
参数：[
{ 
类型：'string'，
最大长度：20，
名称：'fname'，
标签：“名字”
},
{ 
类型：'string'，
最大长度：20，
名称：'lname'，
标签：“姓氏”
},
{ 
类型：'日期'，
姓名：'dob'，
标签：“出生日期”
},
{
类型：'email'，
多重：对，
最大计数：4，
姓名：'电子邮件'，
标签：'电子邮件地址'
},
{
键入：“字符串”，
名称：“addr1”，
标签：“街道地址”
},
{
键入：“字符串”，
名称：“城市”
},
{
类型：“状态”，
名称：“州”，
},
{
键入：“int”，
名称：“zipcode”，
最大值：99999，
最小值：0，
标签：“拉链”
},
]
}
]
//使用“spec”中的所有信息构建HTML表单，并将生成的HTML放入jquery元素“$el”中`
函数formBuilder（规范$el）{
var输入=getInputs（规范）；
$el.html（“+spec.desc+”“+inputs+”）；
}
函数输入（规范）{
var输入=”；
对于（变量i=0；i”；
}
返回输入；
}
$（“按钮”）。在（“单击”）上，函数（$e）{
var specIndex=$（$e.target）.data（'sample'）；
var specData=样本[specIndex-1]；
$（“#spec”）.html（“样本规范”+（specIndex）+”看起来像：
“+JSON.stringify（specData））；
formBuilder（specData，$（“#结果”）；
});

---

数组中的最后一项没有附加逗号。始终确保代码行的结尾也使用分号。这些是我对您的代码所做的更改，现在，正如我所假设的，它正确运行，除非您有任何其他问题？

这不是json。这只是javascript…看看这里。问题是什么？我正在尝试创建一个HTML表单，它使用javascript数组中的数据，但我想不出最好的方法。我是在HTML代码中还是在JavaScript的formBuilder部分中使用append方法$（“.result”）.append（“？”），还是两者都不使用？我不熟悉JavaScript，因此请查看CodePen链接，以便更好地理解这个问题。@ctWheels问题不是分号，我没有附加外部JavaScript或CSS文件（更新的CodePen CodePen.io/anon/pen/YXpBzE）。代码运行，但我试图完成的是在页面的输出部分插入一个HTML表单，同时使用JavaScript中的参数，而不必在每个输入中手动输入它们。@ctwheels–@NOSDUH我不确定我所做的更改是否有帮助，但它基本上采用您在参数部分中设置的参数并创建如果您需要任何进一步的问题或顾虑，请告诉我。希望这就是您想要的更改我的代码以适应标签，使用if语句确定随每个侦听器函数发送的键是否为“label”“然后继续，你能给我一个简短的例子来澄清吗？谢谢@ctwheels

if（key==“label”）{//do something}

var samples = [
{
    title:"Comment Form",
    desc:"Make a comment on the blog post!",
    params:[
      { 
        type: 'text',
        max_length: 100,
        name: 'title'
      },
      {
        type: 'email',
        name: 'email'
      },
      {
        type:'textarea',
        name:'body'
      },
      {
        type:'checkbox',
        name:'subscribe',
        label:'mail me when someone comments on my comment!'
      }
    ]
  },
  {
    title:"Car Order Form",
    desc:"Choose your car!",
    params:[
      { 
        type:'select',
        values:['red','blue','green','black','white','taupe'],
        name: 'color'
      },
      {
        type: 'checkbox',
        values:['fog-lights','radio','a-c','wheels','headlights'],
        name: 'options'
      },
      {
        type:'string',
        minLength:7,
        maxLength:7,
        name:'vanityPlate',
        optional:true
      },
      {
        type:'int',
        name:'price',
      }
    ]
  },
  {
    title:"New User Creator",
    desc:"Create a new user account",
    params:[
      { 
        type:'string',
        maxLength:20,
        name:'fname',
        label:'First Name'
      },
      { 
        type:'string',
        maxLength:20,
        name:'lname',
        label:'Last Name'
      },
      { 
        type:'date',
        name:'dob',
        label:'Date of Birth'
      },
      {
        type:'email',
        multiple:true,
        maxCount:4,
        name:'emails',
        label:'Email Addresses'
      },
      {
        type: 'string',
        name: 'addr1',
        label: 'Street Address'
      },
      {
        type: 'string',
        name: 'city'
      },
      {
        type: 'state',
        name: 'state',
      },
      {
        type: 'int',
        name: 'zipcode',
        maxValue: 99999,
        minValue: 0,
        label: 'ZIP'
      },
    ]
  }
]

//builds an HTML form using all information present in `spec` and places the resulting HTML in jquery element `$el`
function formBuilder(spec,$el){
  var inputs = getInputs(spec);
  $el.html("<form title='"+spec.title+"'><fieldset><legend>"+spec.desc+"</legend>"+inputs+"</fieldset></form>");
}

function getInputs(spec) {
  var inputs = "";
  for(var i = 0; i < spec.params.length; i++) {
    var input = "<input ";
    var attributes = JSON.stringify(spec.params[i]).split(",");
    console.log(attributes);
    for(var j = 0; j < attributes.length; j++) {
      $.each(spec.params[i], function(key, value) {
        input += key + "='" + value + "' ";
      });
    }
    inputs += input + "/><br/>";
  }
  return inputs;
}


$("button").on("click",function($e){
  var specIndex = $($e.target).data('sample');
  var specData = samples[specIndex-1];

  $("#spec").html("Sample spec "+(specIndex)+" looks like: <br>"+JSON.stringify(specData));

  formBuilder(specData, $("#result"));
});