Попытка сделать вызов AJAX API

Question

, поэтому я пытаюсь сделать вызов API AJAX от giphy, и я думаю, что мой код выложен правильно, но я продолжаю получать неопределенный ответ.Кто-нибудь знает, как я могу это исправить.Заранее спасибо, ребята

var topics = ["Drake", "Nicki Minaj"];

// function to display contents in our HTML
function displayGifContents () {

var gifs= $(this).attr("data-type");
var queryURL = "https://api.giphy.com/v1/gifs/search?q=" + gifs + "&api_key=9oQvRPi6s7AzEMcHRHx2Xnc9imoT9oTC";
// Creating an AJAX call for the button being clicked
$.ajax({
    url: queryURL,
    method: "GET"
}).then(function(response) {
    console.log(response);
  var results = response.data;

//   Looping through the data gotten from our api
for (var i = 0; i < results.length; i++) {
      // creating a div to hold the gif image
    var gifDiv = $("<div class='gif-div'>");

    // Storing the rating data
    var rating = results.rating;

    // Creating an element to have the rating displayed
    var p = $("<p>").text("Rating: " + rating);

    gifDiv.append(p);
    $("#dcard").append(gifDiv);
}

Answer 1

Я не уверен, в чем проблема, но вы можете взглянуть на следующий код, для которого ответ возвращает фактические оценки:

var topics = ["Drake", "Nicki Minaj"];

const gifDiv = $('.gif-div');
const buttonContainer = $('#button-container');

topics.forEach((topic) => {
  buttonContainer.append(`<button onclick="displayGifContents('${topic}')">GIFs for "${topic}"</button>`);
});

// function to display contents in our HTML
function displayGifContents (topic) {

  var queryURL = "https://api.giphy.com/v1/gifs/search?q=" + topic + "&api_key=9oQvRPi6s7AzEMcHRHx2Xnc9imoT9oTC";
  
  gifDiv.text('Please wait...');
  
  // Creating an AJAX call for the button being clicked
  $.ajax({
      url: queryURL,
      method: "GET"
  }).then(function(response) {
    console.log(response);
    var results = response.data;

    gifDiv.empty();
    results.forEach(({ rating }) => {
      gifDiv.append(`<p>Rating: ${rating}</p>`);
    });
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-container">
</div>
<hr/ >
<h2>Ratings</h2>
<div class="gif-div">
</div>

Если бы мне пришлось угадывать, я бы сказал, что вы неправильно строите URL-адрес запроса.Вы можете отладить это, например, взглянув на сетевую панель в инструментах разработчика Chrome .