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

Question

I am making a list of bibliography entries using a form adding values to a mongoose.model but certain entries would require to have multiple authors.

To add an author I have added a js script assigned to a button to add inputs for the author's first name and second name but when I submit the form instead of creating multiple author objects in an array of objects defined in a schema it just pushes all the first name values and second name values into the same object. How could I differentiate different authors while using the same inputs to add multiple author objects to the array of authors?

This is the Schema:

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);

This is the form:

<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>

This is the js script that adds input fields:

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);
});

And this is the create route:

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');
    }
  });
});

This his how it is the bibliography entry is displayed on the page:

<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>

I would like the output to look like this:

• secondName, firstName. secondName, firstName

but right now it looks like this:

• secondName, secondName. firstName, firstName

thank you for any help!!!

Answer 1

Try to replace this line

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

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

Updated : The way you post your data is the problem. It handles all your inputs as a single string, that's why it stores all firstName and secondName in one array element and not to many. The proper way to post an array of objects is to make an AJAX request. Just for your case now, if you want to find a quick solution, you could use only one input (eg fullName ) and display the whole name.