如何为每个单选按钮读取不同的对象数组

时间:2016-10-07 09:08:48

标签: javascript arrays node.js object ejs

我有这个问题,为数据库中的每个单选按钮读取唯一元素。 这是数据结构和我从数据库中获得的内容

 { FormularID: 182,
   CampaignID: 14,
   FormLabel: 'Confirm',
   InputType: 'radio',
   InputDetails: 'Remind;NoReminder',
   InputPosition: 6 },
 { FormularID: 190,
   CampaignID: 14,
   FormLabel: 'Gender',
   InputType: 'radio',
   InputDetails: 'Male;Female',
   InputPosition: 6 } ] }

输入类型和输入详细信息字段以及输入详细信息字段容器以分号分隔的值。 我想要做的是,读取每个无线电输入类型并拆分相关的输入细节并在html视图中呈现它 例如 无线电性别只有男性和女性选择 无线电确认将提醒和NoRemind选项。 我尝试过这段代码但是,我只在一个输入字段中获取数据。我的代码结构和逻辑中缺少什么。任何帮助,将不胜感激。 这就是我到目前为止所做的。

for(var i in mydata.formular){
        switch(mydata.formular[i].InputType){
        case 'radio':
          var detailObj={};
          inputdetails=mydata.formular[i].InputDetails.split(';')
          for(var k=0;k<inputdetails.length;k++){
            detailObj[k]=inputdetails[k]

          } 
         radiodetails.push(detailObj)

          console.log(radiodetails)
        break;

        default:
        detailObj={}
        }
    } 

在我看来我这样做

<%for(var i=0; i< templateData.formular.length; i++){ %>
            <div class="form-group">
                <label for="userinput"><%=templateData.formular[i].FormLabel %></label>
                <% if (templateData.formular[i].InputType=="radio") { %>
                <div  class="option-margin-top">
                    <% for(var k=0; k<InputDetails.length; k++){ %>
                        <label class="radio-inline"><input class="userinput" type="<%=templateData.formular[i].InputType %>" value="<%=InputDetails[k]%>" name="optionsRadios" ><%=InputDetails[k]%></label>
                    <% } %>
                </div>  <% } %>

2 个答案:

答案 0 :(得分:1)

首先我简化了一下模板:

var splitInputs = _.map(inputs, function(input){
  var result = _.merge({}, input); // just to clone
  result.InputDetails = result.InputDetails.split(';');
  return (result);
});

var templateString = "<% _.each(inputs, function(input) { %>" +
    "<div class='form-group'><label><%= input.FormLabel %></label>" +
      "<% _.each(input.InputDetails, function(option) { %>" + 
      "<label><input type='radio' name='<%= input.FormLabel %>' value='<%= option %>'><%= option %></label>" +
      "<% }); %>" +
    "</div><% }); %>";

如果它适合您,您可以添加您的类和结构。

作为旁注,当你使用函数式编程,特别是lodash时,更喜欢每个/ forEach而不是基于索引的循环(for(i = ....))。查看我们模板中的差异。

现在,如果我理解“一站式输入”问题,那么它与名称组有关。类型无线电的输入按名称字段分组。由于您使用了静态名称(optionsRadios),因此它们都组合在一起。为了分开它们,我给每个项目指定了自己的名字(我使用了FormLabel,但你可能想要使用其他一些独特的字段)。这解决了这个问题。

您可以找到working jsbin that generates the text here

答案 1 :(得分:0)

我以某种方式解决了它。我将数据发送到视图和每个无线电选项,我在那里进行拆分并将数据分配给输入。

<%for(var i=0; i< templateData.formular.length; i++){ %>
            <div class="form-group">
                <label for="userinput"><%=templateData.formular[i].FormLabel %></label>
                <% if (templateData.formular[i].InputType=="radio") { %>
This where I get the input and spit in EJS and loop through to assign the values
                <% var RadioValues = templateData.formular[i].InputDetails.split(';') %>
                <div  class="option-margin-top">
                    <%  for(var k=0; k<RadioValues.length; k++){ %>
                        <label class="radio-inline"><input class="userinput" type="<%=templateData.formular[i].InputType %>" value="<%=RadioValues[k]%>" name="<%=templateData.formular[i].FormLabel %>" ><%=RadioValues[k]%></label>
                    <% } %>
                </div><% } %>