Looking for a solution to format JSON API data listing books with title, author, and other properties into HTML? Utilizing ES6 backticks and JavaScript templating, the challenge arises when needing to display two cards per row on the HTML page. The issue lies in ensuring that each card iteration is placed within an opening and closing row div every two iterations. While attempting different methods such as using variables and functions with return statements, a simpler approach is sought. Any suggestions for a more efficient way to achieve this task would be greatly appreciated! Thank you.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8>
<title>Book Finder</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="title" class="center">
<h1 class="text-center mt-5">Book Finder</h1>
<div class="row">
<div id="input" class="input-group mx-auto col-lg-6 col-md-8 col-sm-12">
<input id="search-box" type="text" class="form-control" placeholder="Search Books!...">
<button id="search" class="btn btn-primary" onclick="">Search</button>
</div>
</div>
</div>
<div class="book-list">
<h2 class="text-center">Search Result</h2>
<div id="list-output" class="">
<div class="row">
<div class="col-lg-6">
<div class="card" style="">
<div class="row no-gutters">
<div class="col-md-4">
<img src="" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Book Title</h5>
<p class="card-text">Author</p>
<p class="card-text"><small class="text-muted">Publisher: </small></p>
<a href="${bookLink}" class="btn btn-secondary">More Info</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="js/index.js"></script>
</body>
</html>
$(document).ready(function() {
// ... JavaScript code omitted for brevity
});
function formatOutput(title, author, publisher, bookLink, bookImg) {
var htmlCard1 = `<div class="col-lg-6">
// ... Remaining JavaScript code snipped for clarity
return htmlCard1;
}