Question

我正在尝试创建一个分析来自名为Overwatch的游戏数据的网站。

我有这个（https://ow-api.com/v1/stats/pc/us/ShalevBito-2753/complete），当你访问它时，你看到的只是JSON格式的文本。

我是否可以使用JavaScript阅读此内容并将ratingIcon发送到我网站上的一个不错的标签，以便我可以显示它？

当前代码（这是＆lt; script＆gt;标记：

let requestUrl = "https://ow-api.com/v1/stats/pc/us/ShalevBito-2753/complete";
let request = new XMLHttpRequest();
request.open('GET', requestUrl);
request.responseType = 'json';
request.send();
request.onload = function() {
    logData(request.response);
}
function logData(data) {
    document.querySelector('.rating').innerText = `${data['rating']}`;
    document.querySelector('.rank').innerText = `${data['ratingIcon']}`;
}

HTML：

<p class="rating"</p> <img class="rank"</img>

Answer 1

您只需更改src

的img属性即可

document.querySelector('.rank').src = `${data['ratingIcon']}`;

并修复您的img标记：

<img class="rank" />

这是一个演示：https://jsfiddle.net/dxx0y2dh/

Answer 2

你快到了。您的HTML中存在问题，应该是：

<p class="rating"></p>
<img class="rank"/>

此外，您应更改要呈现的图片的src属性而不是innerHTML属性，如下所示：

document.querySelector('.rank').src = `${data['ratingIcon']}`;

这里有一个有效的例子：https://jsfiddle.net/mzzrx40h/

Answer 3

......你已经非常接近了。在将正确的数据属性分配给正确的元素属性时，您只需要使用正确的语法。

let requestUrl = "https://ow-api.com/v1/stats/pc/us/ShalevBito-2753/complete";
let request = new XMLHttpRequest();
request.open('GET', requestUrl);
request.responseType = 'json';
request.send();
request.onload = function() {
    logData(request.response);
}
function logData(data) {
    document.querySelector('.rating').innerText = data.rating;
    document.querySelector('.rank').src = data.ratingIcon;
}

.as-console-wrapper { max-height: 100%!important; top: 0; }

<p class="rating"></p>
<img class="rank"/>

从URL中读取JSON以显示IMG

3 个答案: