Need to construct an API list arry-CodePudding

I need to create: A set of at least 4 clickable elements,

Generate the clickable elements using a predefined JSON array containing JSON Objects. Each JSON object contains: ▪ the name that is displayed in the clickable element. ▪ a string used as the value of an attribute of the clickable element.

But I am new to jquery and JSON. I need to construct the data from an API but for now, I have this. This works and gives me the images of the API. But I really don't know how to fetch the other data and show this on my website. If anyone can help me out, let me know!

$(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);
});

});

CodePudding user response：

Basically, do the exact same thing you're already doing with the picture. The commands are slightly different (I used .text() instead of .attr() to set the text of the element containing the name) but the idea is the same.

You will likely have to figure out how to set up the elements you are adding both structurally and semantically so that you can set an overall styling for the document, but this will get the data in.

$(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>

For instance, here is a slightly more involved implementation that includes some other data points and floats the containers left so that they are displayed horizontally instead of vertically:

$(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>