如何解决GET请求返回数据存入变量及页面展示的报错问题

问题分析 #

你遇到的data is not iterable错误，核心原因是请求的API返回的是单个JSON对象，而非数组。for...of语法仅能遍历数组这类可迭代对象，直接遍历单个对象必然报错。另外，jQuery的$.get方法会自动解析JSON格式的响应，无需手动调用JSON.parse。

修正后的代码 #

JavaScript 代码 #

$(document).ready(function() {
  $("#ajaxButton").click(function() {
    $.get("https://v2.jokeapi.dev/joke/Programming?type=single", function(data) {
      // 直接访问对象的joke属性，获取笑话内容
      $("#here").html(`<p>${data.joke}</p>`);
    });
  });
});

HTML 代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="here"></div>
<p id="joke">Want to hear a joke?</p>
<br>
<button id="ajaxButton">yes</button>

关键说明 #

• 该API返回的单个笑话数据结构类似：{"error":false,"category":"Programming","type":"single","joke":"具体笑话内容","flags":{},"id":123,"safe":true,"lang":"en"}，直接通过data.joke即可拿到笑话文本。
• 若需要获取多条笑话，可修改API参数（比如添加amount=5），此时返回结果会包含jokes数组，这时才需要用循环遍历数组内容。

内容的提问来源于stack exchange，提问作者rocs