需要構建一個API串列arry

我需要創建：一組至少 4 個可點擊元素，

使用包含 JSON 物件的預定義 JSON 陣列生成可點擊元素。每個 JSON 物件包含： ? 顯示在可點擊元素中的名稱。? 用作可點擊元素屬性值的字串。

但我是 jquery 和 JSON 的新手。我需要從 API 構建資料，但現在，我有這個。這有效并為我提供了 API 的影像。但我真的不知道如何獲取其他資料并將其顯示在我的網站上。如果有人可以幫助我，請告訴我！

$(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);
    }
    console.log(response.data[19].rarity);
    console.log(response.data);
});

});

uj5u.com熱心網友回復：

基本上，做你已經對圖片做的完全相同的事情。命令略有不同（我使用 .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>

標籤：数组 json

上一篇：AWSSagemaker輸出如何讀取分布在多行上的多個json物件的檔案

下一篇：根據鍵值決議2個檔案并重新創建另一個json檔案[JQ]