Firestore: Javascript: Как преобразовать пользовательский ввод в массив и сохранить его в Firestore?

Question

Моя программа в настоящее время принимает один пользовательский ввод для определенной категории. Если он / она считает, что необходимо другое поле, доступна кнопка добавления поля. Введите вопрос, как мне получить все эти множественные пользовательские входы для этой определенной категории и превратить их в тип поля массива, чтобы я мог поместить его в Firestore? Как правильно запрашивать указанный ввод, чтобы он превращался в массив при просмотре в Firestore?

Изображение программы:

Пример того, что я хочу видеть в своей базе данных:

Обратите внимание, что поле allergies на этом изображении уже задано как массив

Мой текущий код:

Этот код является пользовательским вводом или код формы:

                                    <div class="form-group">
                                        <label>Allergy</label>
                                        <ul id="fieldList">
                                            <li>
                                                <input type="text" name="allergy" class="form-control" placeholder="Allergy" value="" id="allergy" required>
                                            </li>
                                        </ul>
                                        <button id="addMore">Add more fields</button>
                                        <script>
                                        $(function() {
                                            $("#addMore").click(function(e) {
                                                    e.preventDefault();
                                                    $("#fieldList").append("<li><input type='text' name='allergy' class='form-control' placeholder='Allergy' /></li>");
                                                });
                                            });
                                        </script>
                                    </div>

Этот код получает весь пользовательский ввод и делает set для Firestore:

 //Register
    $('#registerForm').on('submit', async function (e) {
      e.preventDefault();
      // var date_input = new Date($("#date_input").val());
      // var day = date_input.getDay();
      // var month = date_input.getMonth() + 1;
      // var year = date_input.getFullYear();
      // var theDate = year + "-" + month + "-" + day;

      var data = {
        email: $('#email').val(), //get the email from Form
        firstName: $('#fname').val(), // get firstName
        lastName: $('#lname').val(), // get lastName
        allergies: $('#allergy').val(),
        sex: $('#sex').val(),
        birthDate: new Date($('#bday').val()),
        diabetesType: parseInt($('#dtype').val()),
        diabetesComplication: $('#dcomp').val(),
        weight: parseInt($('#weight').val()),
        height: parseInt($('#height').val()),
      };
      console.log(data);
      console.log(data.birthDate);
      var passwords = {
        password : $('#password').val(), //get the pass from Form
        cPassword : $('#cpassword').val(), //get the confirmPass from Form
      }
      if( data.email != '' && passwords.password != ''  && passwords.cPassword != '' ){
        if( passwords.password == passwords.cPassword ){
          //create the user
          await firebase.auth()
            .createUserWithEmailAndPassword(data.email, passwords.password)
            .then(function(user){
                console.log('uid',user.user.uid);
                usersRef.doc(user.user.uid).set({
                  'email': data.email, 'firstName': data.firstName, 
                  'lastName': data.lastName, 'allergies': data.allergies,
                  'sex': data.sex, 'birthDate': firebase.firestore.Timestamp.fromDate(data.birthDate),
                  'diabetesType': data.diabetesType, 'diabetesComplication': data.diabetesComplication,
                  'weight': data.weight, 'height': data.height,
             })

Answer 1

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

Что касается процесса, то здесь код:

HTML

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Allergy</label>
                                            <table class="table table-bordered" id="dynamic_field">  
                                                    <tr>  
                                                        <td><input type="text" name="allergy" id="allergy0" placeholder="Allergy" class="form-control name_list" /></td>  
                                                        <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                                                    </tr>  
                                            </table>  
                                            <script>

                                             var i =  {
                                                    counter : 0,
                                                    button_id : 0,
                                                }  

                                            $(document).ready(function(){  
                                                $('#add').click(function(){  
                                                    i.counter++;  
                                                    i.button_id = i.counter;
                                                    console.log(i.counter);
                                                    console.log(i.button_id);
                                                    $('#dynamic_field').append('<tr id="row'+i.counter+'"><td><input type="text" name="allergy" id="allergy'+i.counter+'" placeholder="Allergy" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
                                                });  
                                                console.log(i.counter);
                                                $(document).on('click', '.btn_remove', function(){  

                                                    $('#'+"row"+i.button_id).remove();
                                                    i.button_id--;
                                                    i.counter--;  
                                                    console.log(i.button_id);
                                                    console.log(i.counter);
                                                });  
                                            });  
                                            </script>
                                        </div>
                                    </div>
                                </div>

Вот код:

JS

  var allergyList = [];
  var cou = i.counter;
  for (c = 0; c <= cou; c++) {
    var allergyField = document.getElementById("allergy" + c).value;
    allergyList.push(allergyField);
    AllergyString = JSON.stringify(allergyList)
  };

Вот процесс хранения его в firestore:

  firebase.auth().createUserWithEmailAndPassword(data.email, passwords.password).then(function(user){setTimeout(function(){
        console.log('uid',user.user.uid);
        usersRef.doc(user.user.uid).set({
          'email': data.email, 'firstName': data.firstName, 
          'lastName': data.lastName, 'allergies': allergyList,
          'sex': data.sex, 'birthDate': firebase.firestore.Timestamp.fromDate(data.birthDate),
          'diabetesType': data.diabetesType, 'diabetesComplication': arrayComplications,
          'weight': data.weight, 'height': data.height, 'firstLogin': true,
     })}, 3000)

Надеюсь, это поможет!