繁体   English   中英

我如何将 output 来自 API 调用的响应放入页面?

[英]How can I output the response from an API call into the page?

我正在尝试使用此节点 package 来获取彩虹六号围攻玩家信息,但无法正常工作。 我正在尝试使用 profileStats 跨度更新跨度

注意:我让 package 在普通节点环境中工作,这样部分代码应该可以工作

 // 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" class="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>

预计 output:

配置文件统计:{ url:'https://r6.tracker.network/profile/xbox/Iner/',名称:'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'}

您不能将原始 JavaScript object 转储到页面中。 您需要使用每个单独的属性更新 DOM 或循环遍历它们。

 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" class="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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM