Firestore:Javascript:如何将用户输入转换为数组并存储在Firestore中?
我的程序目前接受某一类别的单个用户输入。如果他/她认为需要另一个字段,则可以使用“添加字段”按钮。输入一个问题,我如何获取特定类别的所有这些多用户输入,并将它们转换为数组字段类型,以便将其放入Firestore?查询上述输入的正确方法是什么,以便在Firestore中查看时将其转换为数组 节目图像:Firestore:Javascript:如何将用户输入转换为数组并存储在Firestore中?,javascript,html,forms,firebase,google-cloud-firestore,Javascript,Html,Forms,Firebase,Google Cloud Firestore,我的程序目前接受某一类别的单个用户输入。如果他/她认为需要另一个字段,则可以使用“添加字段”按钮。输入一个问题,我如何获取特定类别的所有这些多用户输入,并将它们转换为数组字段类型,以便将其放入Firestore?查询上述输入的正确方法是什么,以便在Firestore中查看时将其转换为数组 节目图像: <div class="form-group">
<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>
//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,
})
我希望在数据库中看到的内容示例:
<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>
//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,
})
请注意,此图像中的字段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>
//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,
})
此代码是用户输入或表单代码:
<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>
//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,
})
我只想回答,如果它适用于任何人,请使用JSON序列化数组,并将其转换为firestore可以存储的数组 关于流程,以下是代码: 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>
希望这有帮助