1

我目前正在使用配方 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，所以我为它的格式化方式道歉。任何帮助表示赞赏。谢谢你。

4

1 回答 1

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>

于 2019-05-02T19:04:28.087 回答