如何將表單中的輸入中的多個值推送到 mongoose.model 中的對象數組？

Question

我正在使用向 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>

我希望輸出如下所示：

• 第二名，第一名。 第二名，名

但現在它看起來像這樣：

• 第二名，第二名。 名字，名字

感謝您的任何幫助！！！

Answer 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] %> /
<% } %>

更新：您發布數據的方式是問題所在。 它將所有輸入作為單個字符串處理，這就是為什么它將所有firstName和secondName存儲在一個數組元素中而不是多個元素中。 發布對象數組的正確方法是發出 AJAX 請求。 就您現在的情況而言，如果您想快速找到解決方案，您可以只使用一個輸入（例如fullName ）並顯示全名。