Разбить строку при вставке запятой и добавить ее в массив строк - PullRequest
Новая
       35

Разбить строку при вставке запятой и добавить ее в массив строк

0 голосов
/ 13 марта 2019

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

НаПредставления 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);
  });
});

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

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

Ответы [ 2 ]

1 голос
/ 13 марта 2019

Долгий путь

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

Например, если мои входные теги имеют значение 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(',').

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

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

1 голос
/ 13 марта 2019

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

Практика 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 между до и после. В вашем коде ручки он отправляет единственный параметр, а с этим фрагментом кода вы собираетесь отправить массив course['content'].

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

...