如何将多个值从表单输入推入mongoose.model中的对象数组?

时间:2019-03-31 12:18:30

标签: javascript node.js mongoose ejs

我正在使用将值添加到mongoose.model的形式来制作书目条目列表,但某些条目将需要具有多个作者。

要添加作者,我添加了一个分配给按钮的js脚本,以添加作者名字和名字的输入,但是当我提交表单而不是在架构中定义的对象数组中创建多个作者对象时,它只需将所有的名字值和名字值推入同一对象。 在使用相同输入将多个作者对象添加到作者数组时,如何区分不同的作者?

这是架构:

const BiblibliographySchema = new mongoose.Schema({
  author: [{
    firstName: "String",
    secondName: "String"
  }],
  title: "String",
  publishInfo: {
    publisher: "String",
    location: "String"
  },
  date: "Number"
});
module.exports = mongoose.model("Bibliography", BiblibliographySchema);

这是表格:

<form class="bibliography-form" action="/workspace/bibliography" method="POST">
  <div id="add-input">
    <input type="text" name="bibliography[author][firstName]" 
    placeholder="First Name">
    <input type="text" name="bibliography[author][secondName]" 
    placeholder="Second Name">
    <button id="add-name" type="button">+</button>
    <br>
    </div>
</form>

这是添加输入字段的js脚本:

var button = document.getElementById("add-name");

button.addEventListener("click", function(){
  var br = document.createElement('br');
  document.getElementById("add-input").appendChild(br);
  var input1 = document.createElement('input');
  var input2 = document.createElement('input');
  input1.setAttribute('type', 'text');
  input1.setAttribute('name', 'bibliography[author][firstName]');
  input1.setAttribute('placeholder', 'First Name');
  input2.setAttribute('type', 'text');
  input2.setAttribute('name', 'bibliography[author][secondName]');
  input2.setAttribute('placeholder', 'Second Name');
  document.getElementById("add-input").appendChild(input1);
  document.getElementById("add-input").appendChild(input2);
  document.getElementById("add-input").appendChild(br);
});

这是创建路径:

app.post('/workspace/bibliography', function(req, res){
  Bibliography.create(req.body.bibliography, function(err, newEntry){
    if (err) {
      console.log(err);
    } else {
      res.redirect('/workspace/bibliography');
    }
  });
});

他的书目条目如何显示在页面上:

<div>
   <% bibliography.forEach(function(entry){ %>
        <form action="/workspace/bibliography/<%=entry._id%>? 
        _method=DELETE" method="POST">
    <p>
      <%= entry.author.secondName %>, <%= entry.author.firstName %>. 
      <i><%= entry.title %>. <%= entry.publishInfo.publisher %></i>, 
      <%= entry.publishInfo.location%>, <%= entry.date %>.
      <button class="delete-bibliography-entry">x</button>
    </p>
        </form>
   <% }); %>
</div>

我希望输出看起来像这样:

  • secondName,firstName。 secondName,firstName

但是现在看起来像这样:

  • secondName,secondName。 firstName,firstName

谢谢您的帮助!

1 个答案:

答案 0 :(得分:1)

尝试替换此行

<%= entry.author.secondName %>, <%= entry.author.firstName %>

<% for(var i=0; i<entry.author.secondName.length; i++) {%>
   <%= entry.author.secondName[i] %>, <%= entry.author.firstName[i] %> /
<% } %>

已更新: 问题在于您发布数据的方式。它将所有输入作为一个字符串处理,这就是为什么将所有firstNamesecondName存储在一个数组元素中而不是存储到很多数组元素中的原因。发布对象数组的正确方法是发出AJAX请求。就目前的情况而言,如果您想找到一种快速的解决方案,则只能使用一个输入(例如fullName)并显示全名。