How can I output the response from an API call into the page?-CodePudding

I'm trying to use this node package to get Rainbow Six Siege player info but I cant get it to work. I'm trying to update the span with the profileStats span

Note: I got the package to work in just a normal node environment so that part of the code should work

// const R6 = require('r6s-stats-api')

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

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'
  };
  document.getElementById('profileStats').innerText = ranked
}

<form>
  <input id="platform"  type="text" placeholder="Platform" />
  <input id='username' class='username' type="text" placeholder="Username" />
  <br>
  <input type="button" value="Search" id="search" />
</form>

<span>Profile Stats: <span id="profileStats">stats</span></span>

Expected output:

Profile Stats: { 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' }

CodePudding user response：

You can't dump a raw JavaScript object into the page. You'd need to update the DOM with each individual property or loop over them.

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

function updater() {
  const platform = document.getElementById('platform').value
  const name = document.getElementById('username').value
  const stats = document.getElementById('profileStats')
  
  // this would be populated with the data from the API
  let playerData = {
    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'
  };

  for (const [key, value] of Object.entries(playerData)) {
    stats.append(key   ': '   value)
    stats.appendChild(document.createElement('br'))
    
  }
}

<form>
  <input id="platform"  type="text" placeholder="Platform" />
  <input id='username' class='username' type="text" placeholder="Username" />
  <br>
  <input type="button" value="Search" id="search" />
</form>

Profile Stats: <br>
<span id="profileStats"></span>