我想从 API 中获取某些结果并将其显示到我的页面上

Question

我目前正在使用食谱 API (https://developer.edamam.com/edamam-docs-recipe-api)，我想要实现的是让用户在搜索字段中输入食谱并且仅 return API 中的标题、图像和成分。我在页面中央使用随机 div 来查看结果，但到目前为止我只取回成分，而不是标签或图像。如果可能，还想将其显示为 table。

这是我在调用 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>

这是我第一次尝试 Whosebug，所以我对它的格式化方式深表歉意。任何帮助表示赞赏。谢谢。

Answer 1

您的代码似乎可以正常工作，但图像除外，这是因为您必须将 link 放入 <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>

我想从 API 中获取某些结果并将其显示到我的页面上

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

ajax

jquery

edamam-api