[英]Display more search results of API with Ajax
首先,我是Java,Ajax,jQuery,JSON和开发人员领域的新手。 我正在处理一个Web项目,该项目要显示Google Books API的搜索结果。 目前,我制作的代码仅显示1个结果,并且可以正常工作,但是我在console.log中看到该API向我显示了另外10个项目的数组,我想显示它们。 我想显示所有这些结果,但是我不知道该怎么做。 我的HTML代码中有一个DIV,这是我的Ajax代码
$.ajax({
url: API + libroBuscado,
success: function(data) {
var componente = `<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h4 class="precio">$</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Descarga un adelanto</a>
<a href="#" class="card-link">Comprar</a>
</div>
</div>`;
var titulo = data.items[0].volumeInfo.title;
var venta = data.items[0].saleInfo.saleability;
var precio = "ARS $" + data.items[0].saleInfo.listPrice.amount;
var autor = data.items[0].volumeInfo.authors;
var sinopsis = data.items[0].volumeInfo.description;
var descarga = data.items[0].accessInfo.webReaderLink;
var compra = data.items[0].saleInfo.buyLink;
$(".col-12").html(componente);
$(".card-title").text(titulo);
$(".precio").text(precio);
$(".card-subtitle").text(autor);
$(".card-text").text(sinopsis);
$(".card-link:nth-of-type(0)").attr("href" + descarga);
$(".card-link:nth-of-type(1)").attr("href" + compra);
console.log(data);
},
error: function(error) {
console.log(error);
}
});
});
我当时在想做一个for循环,但我不知道该怎么做或是否可行
您将需要遍历它们,而不是仅在索引0处调用item。
这样的事情。
var titulo;
var venta;
var precio;
var autor;
var sinopsis;
var descarga;
var compra;
for (i = 0; i < data.items.length; i++) {
titulo = data.items[i].volumeInfo.title;
venta = data.items[i].saleInfo.saleability;
precio = "ARS $" + data.items[i].saleInfo.listPrice.amount;
autor = data.items[i].volumeInfo.authors;
sinopsis = data.items[i].volumeInfo.description;
descarga = data.items[i].accessInfo.webReaderLink;
compra = data.items[i].saleInfo.buyLink;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.