Блог

У меня есть входные данные, которые преобразуют строки в «стилизованные теги», когда пользователь вводит запятую, затем, когда форма отправлена, строки помещаются в массив под названием «содержимое».

В представлениях EJS я печатаю результат следующим образом, <%= course.content %> но результат, который я получаю, 'string1,string2,string3,string4' и чего я добиваюсь, так это того, что при вводе в массив каждая строка должна быть другим элементом:

 content ['string1','string2','string3','string4']
  

только тогда она будет правильно отображаться в моих представлениях путем зацикливания массива. Я хочу добиться этого только с помощью JavaScript или jQuery, пожалуйста.

ОБНОВЛЕНИЕ: вот как я визуализирую в своем представлении

 <ul>
   <% var i; for (i = 0; i < course.content.length; i  ) { %>
     <li><i class="fas fa-check"></i> <%= course.content %></li>
   <% }; %>
</ul>
  

ОБНОВЛЕНИЕ: это мой маршрут, по которому выполняется этот POST-запрос

 router.post("/", middleware.isLoggedIn, function(req, res) {
  Course.create(req.body.course, function(err, course) {
     if (err) {
       req.flash("error", err.message);
       return res.redirect("back");
     }
       res.redirect("/courses/"   course.id);
  });
});
  

РЕШЕНО! используя разделение на стороне сервера следующим образом:

 router.post("/", middleware.isLoggedIn, function(req, res) {
   Course.create(req.body.course, function(err, course) {
     if (err) {
       req.flash("error", err.message);
       return res.redirect("back");
     } else {
       var content = req.body.course.content.toString().split(",");
       course.content = content;
       course.save();
       console.log(course.content);
       res.redirect("/courses/"   course.id);
     }
   });
});
  

Вот другое решение в JavaScript с использованием функции beforesubmit() от @garry man, см. Ниже.

codepen

Долгий путь

В противном случае есть один способ обойти — сколько тегов вы вводите, столько входных элементов вы должны сгенерировать.

Например, мои входные теги являются foo,bar , тогда будут сгенерированы 2 входных тега, как

                                                             Note square brackets below
<input id="hiddenInput" type="hidden" name="course[content][]" required>
<input id="hiddenInput" type="hidden" name="course[content][]" required>
  

Это долгий путь.

Другой способ

Если вы отправляете форму через AJAX, то вы можете манипулировать данными перед отправкой и преобразовывать строку в массив с помощью .split(',') .

Другой способ (на стороне сервера)

Разделять строку по , на стороне сервера.

Хорошо, итак, проблема в том, что вы отправляете форму, содержащую один ввод, который может содержать только строковые значения.

Практика HTML-формы заключается в том, чтобы иметь один ввод для каждого размещаемого элемента массива, например:

 <input name="course[content]"/> //value 1
<input name="course[content]"/> //value 2
<input name="course[content]"/> //value 3
  

Итак, чтобы добиться этого, перед отправкой вы можете вызвать эту функцию, которая генерирует эти элементы для вас:

 function beforesubmit(){
  let submitVal = document.getElementById('hiddenInput');
  let values  = submitVal.value.split(',');

  //let's get the container of the params passed to post
  let paramsContainer = submitVal.parentElement;
  // remove the param containting the string with commas as we're generating new ones
  paramsContainer.removeChild(submitVal); 

  for(let i =0; i<values.length;i  ){
    //for each value, add a submit param containing each value
    let tmp = document.createElement('input');
    tmp.setAttribute('type','hidden');
    tmp.setAttribute('name','course[content]');
    tmp.setAttribute('value',values[i]);
    paramsContainer.appendChild(tmp);
  }
  document.getElementsByTagName('form')[0].submit();
}
  

чтобы вызвать эту функцию, замените вашу submit input на эту:

 <input type="button" value="submit" onclick="beforesubmit()">
  

Используя этот код, вы уже можете видеть POST разницу в запросе между before и after. В вашем codepen он отправляет один параметр, в то время как с помощью этого фрагмента кода вы собираетесь отправить массив course['content'] .

Теперь все зависит от того, как вы собираетесь извлекать данные на стороне сервера, вы должны извлекать course['content'] параметр в виде массива.