I would like to grab certain results from an API and display it onto my page

Question

I'm currently using the Recipe API (https://developer.edamam.com/edamam-docs-recipe-api) and what I'm trying to achieve is have the user input a recipe in the search field and return only the title, image and ingredients from the API. I'm using a random div on the center of the page to see the results, but so far I'm only getting back the ingredients, but not the label nor image. Would also like to display it as a table if possible.

This is what I've done so far when calling the API:

JS file

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>

This is my first time trying out stackoverflow, so I apologize for the way this is formatted. Any help is appreciated. Thank you.

Answer 1

Your code seems to work except the image, it's because you have to put the link into <img /> tag to make it work. This code will do what you want :

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>