Question

我当前正在使用Recipe 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>

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

1 个答案: