Laravel Blade中发起GET API请求并渲染JSON结果失败排查

你的代码存在几个关键问题，导致无法正常显示API返回的内容，以下是问题分析和修复方案：

问题点分析 #

• 错误遍历单个JSON对象：Bored API返回的是单个对象而非数组，$.each(items)会遍历对象的每个属性键（如activity、type），不符合你展示单条活动内容的需求。
• 模板字符串语法错误：你使用单引号包裹字符串，${}变量插值仅在**反引号（）**包裹的模板字符串中生效，单引号内会直接输出${activity.text}`这类原始文本。
• 无效的键名调用：API返回的属性键为activity、type等，你代码中activity.text、text.body都是不存在的键，属于错误调用。
• 未将生成的HTML插入DOM：你生成了output变量，但没有把它添加到页面的<ul id="items">容器中，导致内容无法渲染。

修复后的Blade代码 #

<html>
<head>
    <meta charset="utf-8">
    <title>Item Manager</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>

<div class="container">
    <ul id="items" class="list-group">
    </ul>
    <!-- 可选：添加按钮获取新活动 -->
    <button class="btn btn-primary mt-3" onclick="getItems()">获取新活动</button>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

<script type="text/javascript">
    $(document).ready(function (){
        getItems();

       function getItems(){
           $.ajax({
               url:'https://www.boredapi.com/api/activity'
           }).done(function (item){
            // 使用反引号包裹模板字符串，正确调用API返回的属性
            let output = `<li class="list-group-item">
                            <strong>活动：${item.activity}</strong>
                            <br>类型：${item.type} | 参与人数：${item.participants} | 难度：${item.accessibility}
                          </li>`;
            // 将生成的HTML插入到目标ul容器中
            $('#items').html(output);
           });
       }
    });
</script>
</body>
</html>

额外说明 #

• 如果需要展示多条活动数据，可以多次调用API并拼接结果。
• 可以添加错误处理逻辑，捕获请求失败的情况：

  }).fail(function(){
      $('#items').html('<li class="list-group-item text-danger">获取活动失败，请稍后重试</li>');
  });
  

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