Как я могу перенести несколько значений из входных данных в форме в массив объектов в mongoose.model?

#javascript #node.js #mongoose #ejs

#javascript #node.js #mongoose #ejs

Вопрос:

Я составляю список записей библиографии, используя форму, добавляющую значения в mongoose.model, но для некоторых записей потребуется несколько авторов.

Чтобы добавить автора, я добавил js-скрипт, назначенный кнопке для добавления входных данных для имени автора и второго имени, но когда я отправляю форму вместо создания нескольких объектов author в массиве объектов, определенных в схеме, он просто помещает все значения first name и second name в один и тот же объект. Как я мог бы различать разных авторов, используя одни и те же входные данные, чтобы добавить несколько объектов author в массив authors?

Это схема:

 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, второе имя. Имя пользователя, FirstName

спасибо за любую помощь!!!

Комментарии:

1. в методе post попробуйте console.log(req.body.bibliography) и отправьте нам выходные данные.

2. { ‘author.FirstName’: ‘Roald’, ‘author.secondName’: ‘Dahl’, название: ‘Tales Of the Unexpected’, ‘publishInfo.publisher’: ‘Penguin’, ‘publishInfo.location’: ‘UK’, дата: ‘1979’ }

3. Я также только что понял, что, похоже, неправильно ссылаюсь на модель в свойстве <input> name: { ‘author.FirstName ‘: ‘Roald’, ‘author.secondName’ : ‘Dahl’, название: ‘Tales Of the Unexpected’, ‘publishInfo.publisher’: ‘Penguin’, ‘publishInfo.location’: ‘UK’, дата: ‘1979’ }

4. @dimitristseggenes исправил атрибут name, поэтому выходные данные console.log (req.body.bibliography) исправлены { author: { firstName: 'Roald', secondName: 'Dahl' }, title: 'Tales Of the Unexpected', publishInfo: { publisher: 'Penguin', location: 'UK' }, date: '1979' }

5. хорошо, это вывод даже для ввода нескольких строк?

Ответ №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 ) и отобразить полное имя.

Комментарии:

1. К сожалению . длина и entry.author.secondName[i] не определены и не работают ошибка получения: не удается прочитать свойство ‘length’ неопределенного

2. Также массив author должен выглядеть следующим образом: author: [{firstName: Roald, secondName: Dahl},{firstName: Italo, secondName: Calvino}]

3. ДА. В этом проблема. Это потому, что вы отправляете данные с использованием метода html form. Правильный способ — использовать AJAX-запрос для публикации всех данных.