我如何编写以下内容,以便我不需要这个req.payload.reps + number
和req.payload.kilos + number
的广泛列表,并且只有一对req.payload.reps - req.payload.kilos
但是根据以下内容自动递增传递给具有这些名称的模式的数据的数量?
此外,如果我不使用计数器来增加name
字段的input
属性,则reps
和kilos
的值将存储为两个数据库中的数组。之后是否更容易匹配相应的值,或者按照我之前提出的更有意义的方式设置架构?
例如,有req.payload.reps[i]
这样的东西。这样,当用户为这些输入字段发送少于10个值时,我不会将空对象发布到数据库,并且用户可以通过维护模式格式发送任意数量的输入值。
我在服务器端使用hapijs
。
我的路由器功能:
var sendWorkout = {
handler: function(req, reply){
var d = new Date();
var cd = d.getDate() + "-" + (d.getMonth()+1) + "-" + d.getFullYear();
console.log(req.payload);
// sets schema for workout
// this needs to be the data from the form and then should be validated with joi!!!
var workoutSchema = {
// "personId": "personId", //to later be replaced with actual username
"date": cd,
"workout": [
{
"exercise": req.payload.exercise,
"musclegroup": req.payload.musclegroup,
"sets": [
{
"reps": req.payload.reps,
"kilos": req.payload.kilos
},
{
"reps": req.payload.reps1,
"kilos": req.payload.kilos1
},
{
"reps": req.payload.reps2,
"kilos": req.payload.kilos2
},
{
"reps": req.payload.reps3,
"kilos": req.payload.kilos3
},
{
"reps": req.payload.reps4,
"kilos": req.payload.kilos4
},
{
"reps": req.payload.reps5,
"kilos": req.payload.kilos5
},
{
"reps": req.payload.reps6,
"kilos": req.payload.kilos6
},
{
"reps": req.payload.reps7,
"kilos": req.payload.kilos7
},
{
"reps": req.payload.reps8,
"kilos": req.payload.kilos8
},
{
"reps": req.payload.reps9,
"kilos": req.payload.kilos9
},
{
"reps": req.payload.reps10,
"kilos": req.payload.kilos10
},
]
}
]
};
// defines unique key for data
var key = cd + req.payload.exercise;
console.log(key);
// adds payload to database
db.add(key, workoutSchema, function(error, results){
if (error) {
console.log("Coushbase error: " + error);
reply(error + "\n");
}
console.log(results);
reply(workoutSchema);
});
}
};
我的jQuery为input
字段添加了一个计数器' name
:
$(document).ready(function() {
console.log('Document ready');
var counter = 0;
// function to add sets to specific exercise
$('#add-set').on('click', function() {
console.log ('Button add-set clicked');
counter += 1;
console.log(counter);
var htmlSets = '<div class="sets">' +
'<label for="reps" class="labels">Reps</label><input type="text" name="reps' + counter +'" class="reps-column" placeholder="How many reps?" />' +
'<label for="kilos" class="labels">Kg\'s</label><input type="text" name="kilos' + counter +'" class="kilos-column" placeholder="How much Kg?" />' +
'</div>';
$('div.sets:last').append(htmlSets);
});
});
我的HTML:
<div id="forms">
<form id="workout-form" name="workout-form" action="newworkout/workout" method="POST" enctype="application/x-www-form-urlencoded">
<div class="workouts">
<label for="exercise" class="labels"><strong>Exercise</strong></label> <input type="text" name="exercise" id="exercise" placeholder="Which exercise?" autofocus />
<label for="musclegroup" class="labels"><strong>Muscle-Group</strong></label> <input type="text" name="musclegroup" id="musclegroup" placeholder="Which muscle-group?" />
<div class="sets">
<label for="reps" class="labels">Reps</label> <input type="text" name="reps" class="reps-column" placeholder="How many reps?" />
<label for="kilos" class="labels">Kg's</label> <input type="text" name="kilos" class="kilos-column" placeholder="How much Kg?" />
</div>
<hr>
</div>
<button id="add-set"class="add-buttons" type="button"><i class="fa fa-plus-circle fa-2x"></i></button>
<button id="submit-workout" type="submit"><strong>Save Workout</strong></button>
</form>
</div>
</main>
答案 0 :(得分:0)
将您的jQuery更改为以下内容(请注意输入名称上的方括号):
var htmlSets = '<div class="sets">' +
'<label for="reps" class="labels">Reps</label><input type="text" name="reps[' + counter +']" class="reps-column" placeholder="How many reps?" />' +
'<label for="kilos" class="labels">Kg\'s</label><input type="text" name="kilos[' + counter +']" class="kilos-column" placeholder="How much Kg?" />' +
'</div>';
这样您就可以发送两个数组reps
和kilos
。应该解决你的问题:)