У меня есть json api, который представляет собой список книг с их свойствами: название, автор и т. Д. Мне нужно вывести данные в формате html.Я использую es6 backtics для этого и шаблонов JavaScript.Но проблема, с которой я сталкиваюсь, заключается в том, что вывод - это не одна итерация на HTML-страницу, а каждые две итерации.каждый объект из json попадает в html-карту.Но моя страница требует две карты в строке.поэтому мне нужно вставлять открывающую строку div каждые две итерации и закрывающую строку div каждые две итерации, чтобы между начальной строкой и закрывающим div у меня были две карты.Сначала я решил поместить свой шаблон в переменную, но это не сработало.Во-вторых, я поместил это в функцию с оператором return.на этот раз сработает, но я могу правильно вставить теги строк ... кто-то может предложить более простой способ сделать это?спасибо вот страница index.html.две карты в одном ряду.Я не знаю заранее, сколько карт мне понадобится.вывод будет опубликован в список-выход ID.
<!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">
<!-- card -->
<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>
<!-- card -->
<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>
<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://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
<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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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() {
var item, tile, author, publisher, bookLink, bookImg;
var outputList = document.getElementById("list-output");
//listener for search button
$("#search").click(function() {
$("#title").animate({'margin-top': '5px'}, 1000);
// $(".book-list").css("visibility", "visible");
var searchData = $("#search-box").val();
if(searchData === "") {
// dsiplayErr();
} else {
console.log(searchData);
$.get("https://www.googleapis.com/books/v1/volumes?q="+searchData, function(response) {
for (var i = 0; i < response.items.length; i++) {
item = response.items[i];
title = item.volumeInfo.title;
author = item.volumeInfo.authors;
publisher = item.volumeInfo.publisher;
bookLink = item.selfLink;
bookImg = item.volumeInfo.imageLinks.thumbnail;
// in production code, item.text should have the HTML entities escaped.
if( (i+2) % 2 != 0) {
console.log("odd")
outputList.innerHTML += `<div class="row">`;
}
outputList.innerHTML += formatOutput(title, author, bookLink, bookImg);
if((i+2) % 2 == 0) {
console.log("even")
outputList.innerHTML += `</div>`;
}
console.log(outputList.innerHTML);
}
});
}
});
});
function formatOutput(title, author, publisher, bookLink, bookImg) {
// console.log(title + ""+ author +" "+ publisher +" "+ bookLink+" "+ bookImg)
var htmlCard1 = `<div class="col-lg-6">
<div class="card" style="">
<div class="row no-gutters">
<div class="col-md-4">
<img src="${bookImg}" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">Author: ${author}</p>
<p class="card-text"><small class="text-muted">Publisher: ${publisher}</small></p>
</div>
</div>
</div>
</div>
</div>`
return htmlCard1;
}