Я хотел бы получить определенные результаты из API и отобразить их на своей странице

Question

В настоящее время я использую API рецептов (https://developer.edamam.com/edamam-docs-recipe-api)), и я пытаюсь добиться, чтобы пользователь ввел рецепт в поле поиска и возвращал только название, изображение и ингредиенты из API.Я использую случайный div в центре страницы, чтобы увидеть результаты, но пока я получаю только ингредиенты, но не метку или изображение. Также хотел бы отобразить его в виде таблицы, если это возможно.

Это то, что я сделал до сих пор при вызове API:

JS-файл

var type = $(this).attr("data-type");
var queryURL = "https://api.edamam.com/search?q=shrimp&app_id=e01c42d8&app_key=19a34826099c7e0c9666127afe12981b";
console.log(queryURL);

// Grabbing our API results
$.ajax({
    url: queryURL,
    method: "GET",
  })
    .then (function(response) {
      $(".card-text").html("Recipe: " + response.hits[0].recipe.label);
      $(".card-text").html(response.hits[0].recipe.image);
      $(".card-text").html(response.hits[0].recipe.ingredientLines);
      console.log(response);

HTML

 <div class="card-body text-center">
  <p class="card-text">Some text inside the fifth card</p>
</div>

Это мой первыйвремя опробования stackoverflow, поэтому я прошу прощения за то, как это отформатировано. Любая помощь приветствуется. Спасибо.

Answer 1

Ваш код работает, кроме изображения, потому что вам нужно поместить ссылку в тег <img />, чтобы он заработал. Этот код будет делать то, что вы хотите:

var type = $(this).attr("data-type");
var queryURL = "https://api.edamam.com/search?q=shrimp&app_id=e01c42d8&app_key=19a34826099c7e0c9666127afe12981b";
console.log(queryURL);

// Grabbing our API results
$.ajax({
    url: queryURL,
    method: "GET",
  })
    .then (function(response) {
      $(".title").text("Recipe: " + response.hits[0].recipe.label);
      $(".img").attr("src", response.hits[0].recipe.image);
      $(".ingredients").text(response.hits[0].recipe.ingredientLines);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body text-center">
  <h1 class="title"></h1>
  <img class="img" />
  <p class="ingredients"></p>
</div>