我目前在我的节点js中有一个查询,如下所示:
app.get('/fav/books', function(req, res){
var sql = ("SELECT title, pictureUrl, author, description, genre FROM books")
connection.query(sql, function(err, result){
if(err) {
console.log('Error in the query.');
} else {
console.log('Success!\n');
console.log(result);
var book = result;
return book;
}
});
});
输出到控制台如下: Console Output
我想"还书;"给用户带有把手的卡片输出如下:
<div class="page-carousel">
<div class="panel id1">
<img href="pictureUrl"/>
<h3>title</h3>
<p><strong>author</strong></p>
<p>description</p>
<p>genre</p>
</div>
</div>
面板将是Book的ID,因为它需要创建与ID一样多的面板。书籍信息将按原样。
答案 0 :(得分:0)
Angularjs非常适合这种情况。将此响应对象分配给$ scope变量,例如$ books。然后您可以执行此操作:
<div class="page-carousel">
<div ng-repeat="x in books" class="panel {{x.id}}">
<img href="{{x.pictureUrl}}"/>
<h3>{{x.title}}</h3>
<p><strong>{{x.author}}</strong></p>
<p>{{x.description}}</p>
<p>{{x.genre}}</p>
</div>
</div>
答案 1 :(得分:0)
我可以看到你要归还的书是一个对象数组,每个对象都包含一个书信息,在这种情况下我们需要在手柄中循环迭代,如 -
{{#each book}}
<div class="page-carousel">
<div class="panel id1">
<img href={{book.pictureUrl}}/>
<h3>{{book.title}}</h3>
<p><strong>{{book.author}}</strong></p>
<p>{{book.description}}</p>
<p>{{book.genre}}</p>
</div>
</div>
{{/each}}