调用RAWG API获取游戏数据并渲染至HTML的问题咨询

1. 返回值为空的原因 #

你调用的RAWG游戏搜索接口返回的根数据为分页结构，success回调中拿到的results是接口返回的根对象，真实的游戏列表存放在根对象的results数组字段下。你设置了page_size=1，所以取数组第1项results.results[0]即可得到目标游戏的完整数据，直接调用results.name肯定会返回undefined。

2. 对应字段说明 #

• 游戏封面图：background_image 字段存储图片直链
• 游戏评分：rating 字段存储满分5分的浮点型评分
• 游戏描述：搜索接口仅返回精简版的short_description短描述，如需完整的带格式游戏描述，需要额外调用/games/{游戏id}单游戏详情接口，从返回结果的description字段取值即可。

3. 完整实现代码 #

首先在HTML中提前预留渲染容器：

<div id="game-card">
  <h2 id="game-name"></h2>
  <img id="game-cover" alt="游戏封面" style="max-width: 400px">
  <p id="game-description"></p>
  <p>用户评分：<span id="game-score"></span> / 5</p>
</div>

修正后的请求逻辑如下：

$.ajax({
  url: 'https://api.rawg.io/api/games?page_size=1&search=call of duty modern warfare&key=75a9ffdcf4444e1896ead6e555b966e8',
  type: 'GET',
  contentType: 'application/json',
  crossDomain: true,
  success: function (res) {
    // 获取第一个匹配的游戏条目
    const targetGame = res.results[0]
    // 渲染基础字段
    $('#game-name').text(targetGame.name)
    $('#game-cover').attr('src', targetGame.background_image)
    $('#game-description').text(targetGame.short_description)
    $('#game-score').text(targetGame.rating)
    
    // 如需完整描述，追加以下请求
    $.ajax({
      url: `https://api.rawg.io/api/games/${targetGame.id}?key=75a9ffdcf4444e1896ead6e555b966e8`,
      type: 'GET',
      success: function (detailRes) {
        $('#game-description').html(detailRes.description)
      }
    })
  }
})

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