需要构造一个API列表数组

Question

我需要创建:一个至少有4个可点击元素的集合，

使用包含JSON的预定义JSON数组生成可点击元素对象。每个JSON对象包含:在可点击元素中显示的名称。-一个字符串，用作可点击元素的属性值。

但我是新的jquery和JSON。我需要从API构造数据，但现在，我有这个。这工作，并给我的API的图像。但我真的不知道如何获取其他数据并将其显示在我的网站上。如果有人能帮助我，请告诉我!

美元(文档)。Ready (function (e) {

$("#TheSubmitButton").on("click", function(event){
$("#card-container").empty();

event.preventDefault();
var pokemon = $("#searchInput")
.val()
.trim();
console.log(pokemon);


$.ajax({
method: "GET",
url: "https://api.pokemontcg.io/v2/cards?q=name:" + pokemon

}).then(function(response){
for (var i = 0; i < pokemon.length; i++) {
var pokemonCard = $("<img class='pkmn-card'>");
pokemonCard.attr("src", response.data[i].images.small);
$("#card-container").append(pokemonCard);
}
console.log(response.data[19].rarity);
console.log(response.data);
});

});

Answer 1

基本上，做与图片完全相同的事情。命令略有不同(我使用.text()而不是.attr()来设置包含名称的元素的文本)，但思想是相同的。

您可能必须弄清楚如何在结构上和语义上设置要添加的元素，以便为文档设置总体样式，但这将获得数据。

$(document).ready(function (e) {
$("#TheSubmitButton").on("click", function(event){

$("#card-container").empty();
event.preventDefault();
var pokemon = $("#searchInput").val().trim();
console.log(pokemon);

$.ajax({
method: "GET",
url: "https://api.pokemontcg.io/v2/cards?q=name:" + pokemon

}).then(function(response){
for (var i = 0; i < pokemon.length; i++) {
var pokemonCard = $("<img class='pkmn-card'>");
pokemonCard.attr("src", response.data[i].images.small);
$("#card-container").append(pokemonCard);
var pokemonName = $("<div></div>");
pokemonName.text(response.data[i].name);
$("#card-container").append(pokemonName);
}
});

});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='searchInput' type='text' />
<button id='TheSubmitButton'>CLICK</button>
<div id='card-container'></div>

例如，下面是一个稍微复杂一些的实现，它包括一些其他数据点，并使容器向左浮动，以便它们水平显示，而不是垂直显示:

$(document).ready(function (e) {
$("#TheSubmitButton").on("click", function(event){
$("#card-container").empty();
event.preventDefault();
var pokemon = $("#searchInput").val().trim();
console.log(pokemon);
$.ajax({
method: "GET",
url: "https://api.pokemontcg.io/v2/cards?q=name:" + pokemon
}).then(function(response){
for (var i = 0; i < pokemon.length; i++) {
var pokeTainer = $("<div class='poketainer'></div>");
var pokemonCard = $("<img class='pkmn-card'>");
pokemonCard.attr("src", response.data[i].images.small);
pokeTainer.append(pokemonCard);
var pokemonName = $("<div></div>");
pokemonName.text(response.data[i].name);
pokeTainer.append(pokemonName);

try {            
var pokemonEvolve = $("<div></div>");
pokemonEvolve.text('Evolves to: ' + response.data[i].evolvesTo[0]);
pokeTainer.append(pokemonEvolve);
} catch {}

var pokemonFlavor = $("<div></div>");
pokemonFlavor.text(response.data[i].flavorText);
pokeTainer.append(pokemonFlavor);

$("#card-container").append(pokeTainer);
}
});
});
});

.poketainer {float:left; max-width:250px; min-height: 550px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='searchInput' type='text' />
<button id='TheSubmitButton'>CLICK</button>
<div id='card-container'></div>