Вывести шаблон javascript на html-страницу внутри строки div
У меня есть 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;
}1 ответ
Я удалил несколько строк, которые мне показались ненужными, но вы можете добавить их обратно, если хотите. Следующий код должен работать так, как вы ожидали
$(document).ready(function () {
var item, tile, author, publisher, bookLink, bookImg;
var outputList = $("#list-output");
//listener for search button
$("#search").click(function () {
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.
var html;
if ((response.items.length % 2 != 0) && (i == response.items.length - 1)) {
html = "";
html += "<div class='row'>";
html += formatOutput(title, author, publisher, bookLink, bookImg);
html += "</div>";
outputList.append(html);
}
else {
if (i % 2 == 0) {
html = "";
html += "<div class='row'>";
}
html += formatOutput(title, author, publisher, bookLink, bookImg);
if (i % 2 != 0) {
html += "</div>";
outputList.append(html);
}
}
}
});
}
});
});
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>
<a href="${bookLink}" class="btn btn-secondary">More Info</a>
</div>
</div>
</div>
</div>
</div>`
return htmlCard1;
}