如何将API调用响应输出到页面？Rainbow Six Siege数据渲染问题

问题原因 #

直接把JavaScript对象赋值给innerText时，会自动调用对象的toString()方法，默认返回[object Object]，因此无法显示具体的统计内容。

解决方案 #

方法1：用JSON.stringify格式化并调整格式（推荐）

通过JSON.stringify将对象转为带缩进的字符串，再替换引号格式匹配你的预期输出：

document.getElementById('search').addEventListener('click', updater)

// 注意：调用真实API时需改为async函数
function updater() {
  var platform = document.getElementById('platform').value
  var name = document.getElementById('username').value
  // let ranked = await R6.rank(platform, name)
  let ranked = {
    url: 'https://r6.tracker.network/profile/xbox/Iner/',
    name: 'Iner',
    header: 'https://images-eds-ssl.xboxlive.com/image?url=wHwbXKif8cus8csoZ03RWwcxuUQ9WVT6xh5XaeeZD01lYI1.K4gGf7cqlZ1YM_tmW8qRVC.FFmMbdPQW96vXZsQwreP_gBgF_1gRNq_1MEYG.I_gg1USpTo.w7p9X9EFL3VbKuCqrVtHXWJWPFwdWjVZawugUn8OP8CdzeblMDQHhUJv42ods6makmoyftKW',
    kd: '1.33',
    kills: '9,762',
    deaths: '7,350',
    win_: '56.2%',
    wins: '967',
    losses: '753',
    time_played: '555h 23m 42s',
    matches: '1,721',
    kills_match: '5.67',
    kills_min: '0.29',
    mmr: 'K/D',
    rank: 'SILVER V',
    rank_img: 'https://imgur.com/NpBtpuL.png'
  };

  // 格式化对象为带缩进的字符串，调整引号格式
  const formattedStats = JSON.stringify(ranked, null, 2)
    .replace(/"([^"]+)":/g, '$1:') // 移除键名的双引号
    .replace(/"([^"]+)"/g, "'$1'"); // 将值的双引号替换为单引号

  document.getElementById('profileStats').innerText = formattedStats
}

方法2：手动构建格式化字符串（自定义程度更高）

遍历对象键值对，逐行拼接成目标格式：

document.getElementById('search').addEventListener('click', updater)

function formatStats(obj) {
  let result = '{\n';
  const entries = Object.entries(obj);
  entries.forEach(([key, value], index) => {
    // 拼接每行内容，最后一行不加逗号
    result += `  ${key}: '${value}'${index < entries.length - 1 ? ',' : ''}\n`;
  });
  result += '}';
  return result;
}

function updater() {
  var platform = document.getElementById('platform').value
  var name = document.getElementById('username').value
  // let ranked = await R6.rank(platform, name)
  let ranked = { /* 你的统计对象 */ };

  document.getElementById('profileStats').innerText = formatStats(ranked)
}

额外注意事项 #

如果启用真实的r6s-stats-api调用，updater函数必须声明为async，因为await只能在异步函数中使用：

async function updater() {
  var platform = document.getElementById('platform').value
  var name = document.getElementById('username').value
  let ranked = await R6.rank(platform, name)
  // 后续格式化代码...
}

内容的提问来源于stack exchange，提问作者Google-AdMob