我正在尝试显示一个表单，该表单中填充了文档加载上获取的JSON文件中的数据。它循环浏览数据中的数组（其中有20个项目），并在每个周期中创建一个表单，并用它找到的数据填充它。
首先，示例JSON：
{
"team": {
"_id": "5c59b190d4dc14030821620e",
"team": {
"teamRoster": {
"teamCoach": "Coach Testerson",
"players": [
{
"playerName": "First Player",
"playerNumber": "1",
"playerPosition": "Goaltender"
},
{
"playerName": "Second Player",
"playerNumber": "2",
"playerPosition": "Defense"
},
{
"playerName": "Third Player",
"playerNumber": "3",
"playerPosition": "Forward"
},
{
"playerName": "Fourth Player",
"playerNumber": "4",
"playerPosition": "Forward"
},
{
"playerName": "Fifth Player",
"playerNumber": "5",
"playerPosition": "Goaltender"
},
{
"playerName": "Sixth Player",
"playerNumber": "6",
"playerPosition": "Defense"
},
{
"playerName": "Seventh Player",
"playerNumber": "7",
"playerPosition": "Forward"
},
{
"playerName": "Eighth Player",
"playerNumber": "8",
"playerPosition": "Defense"
},
{
"playerName": "Ninth Player",
"playerNumber": "9",
"playerPosition": "Defense"
},
{
"playerName": "Tenth Player",
"playerNumber": "10",
"playerPosition": "Forward"
},
{
"playerName": "Eleventh Player",
"playerNumber": "11",
"playerPosition": "Forward"
},
{
"playerName": "Twelfth Player",
"playerNumber": "12",
"playerPosition": "Defense"
},
{
"playerName": "Thirteenth Player",
"playerNumber": "13",
"playerPosition": "Forward"
},
{
"playerName": "Fourteenth Player",
"playerNumber": "14",
"playerPosition": "Defense"
},
{
"playerName": "Fifthteenth Player",
"playerNumber": "15",
"playerPosition": "Goaltender"
},
{
"playerName": "Sixteenth Player",
"playerNumber": "16",
"playerPosition": "Forward"
},
{
"playerName": "Seventeenth Player",
"playerNumber": "17",
"playerPosition": "Defense"
},
{
"playerName": "Eighteenth Player",
"playerNumber": "18",
"playerPosition": "Defense"
},
{
"playerName": "Nineteenth Player",
"playerNumber": "19",
"playerPosition": "Defense"
},
{
"playerName": "Twentieth Player",
"playerNumber": "20",
"playerPosition": "Forward"
}
]
},
"shortTeamName": "TST",
"teamName": "Test Team",
"added": "2019-02-05T15:53:52.818Z",
"updated": "2019-02-05T15:53:52.818Z"
},
"__v": 0
}
}
然后，update.hbs中的代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
{{> header}}
<script>
$(document).ready(function() {
for (i = 1; i < 21; i++) {
{{#each team.team.teamRoster.players}}
text = "<div class='form-group row'><div class='col-md-4'><input id='player" + i + "Name' name='player" + i + "Name' value='{{this.playerName}}' type='text' class='form-control here'></div><div class='col-md-4'><select id='player" + i + "Number' name='player" + i + "Number' selected='{{this.playerNumber}}' class='form-control here jerseyNumber'><option>{{this.playerNumber}}</option></select></div><div class='col-md-4'><select id='player" + i + "Position' name='player" + i + "Position' value='{{this.playerPosition}}' class='form control here position'><option value='{{this.playerPosition}}'>{{this.playerPosition}}</option><option value='Goaltender'>Goaltender</option><option value='Forward'>Forward</option><option value='Defense'>Defense</option></select></div></div>";
var playerSpan = $('.player');
playerSpan.append($(text));
{{/each}}
}
$(".jerseyNumber").each(function(){
var $select = $(this);
for (n=0;n<=99;n++){
$select.append($('<option></option>').val(n).text(n))
}
});
});
</script>
<div class="container-fluid" id="body">
<div class="container" id="page-header">
<h1><span id="headline">Team Update</span></h1>
<hr>
<h3><span id="subheadline"></span></h3>
<form method="patch" action="/update" enctype="multipart/form-data">
<div class="form-group row">
<div class="col-md-4">
<label for="teamName" class="col-form-label">Team Name</label>
<input id="teamName" name="teamName" value="{{team.team.teamName}}" type="text" required="required" class="form-control here">
</div>
<div class="col-md-4">
<label for="teamShortName" class="col-form-label">Team Short Name</label>
<input id="teamShortName" name="teamShortName" value="{{team.team.shortTeamName}}" type="text" aria-describedby="teamShortNameHelpBlock" required="required" maxlength="3" class="form-control here">
<span id="teamShortNameHelpBlock" class="form-text text-muted">Three Characters Only</span>
</div>
</div>
<div class="form-group row">
<div class="col-md-4">
<label for="coachName" class="col-form-label">Coach Name</label>
<input id="coachName" name="coachName" value="{{team.team.teamRoster.teamCoach}}" type="text" class="form-control here">
</div>
<div class="col-md-4">
<label for="imageFile" class="col-form-label">Team Logo</label>
<input type="file" class="btn btn-default" name="teamLogo" accept="image/png">
<span id="teamLogoHelpBlock" class="form-text text-muted">Currently PNG files only</span>
</div>
</div>
<div class="form-group row">
<div class="col-md-4">
<strong>Player Names</strong>
</div>
<div class="col-md-4">
<strong>Player Numbers</strong>
</div>
<div class="col-md-4">
<strong>Player Positions</strong>
</div>
</div>
<span class="player">
</span>
<div class="form-group row">
<div class="col-md-6">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
<hr>
</div>
{{> footer}}
</body>
</html>
最后，server.js部分：
app.get('/update/team/:id', (req, res) => {
var id = req.params.id;
console.log(id);
if (!ObjectID.isValid(id)) {
return res.status(404).send();
}
Team.findById(id).then((team) => {
if (!team) {
return res.render('error.hbs');
}
console.log(team);
console.log(team.team.teamRoster.players[0])
res.render('update.hbs', {team});
}).catch((e) => {
res.render('error.hbs');
});
});
我已经尝试删除i循环，或更改{{{erven}}行，但似乎没有任何工作。任何人都能提供的任何帮助将不胜感激。
自从我玩车把以来已经有一段时间了，但是＃each是一个迭代器，并且您正在for循环中使用它。将其放在循环中应该有效