rawg.io api调用Javascript在html中显示

Question

我仍在寻求找出javascript，并使用API作为我已经设置的项目的一部分(因此，我对此仍然非常陌生，学习JS仅2周)。

我的API被调用得很好，我可以在网络中看到输出，所以我知道我得到了一个连接，但是尽管环顾四周，我还是很难在html中显示输出。

所以我必须在vanilla中这样做，使用不带.then链的异步等等。

到目前为止我拥有的js：

async function fetchData() {
    return (await fetch('https://api.rawg.io/api/games?key=CHANGED_FROM_MY_KEY')).json();
}
document.addEventListener("DOMContentLoaded", async () => {
    let games = [];
    try {
        games = await fetchData();
    } catch (e) {
        console.log("Error!");
        console.log(e);
    }
    console.log(games);
});

function appendData(games) {
    var mainContainer = document.getElementById("rawgGame");
    for (var i = 0; i < games.results; i++) {
        var div = document.createElement("div");
        div.innerHTML = 'gameName: ' + games.results[i].name;
        mainContainer.appendChild(div);
        div.innerHTML = 'gameImage: ' + games.results[i].background_image;
        mainContainer.appendChild(div);
        div.innerHTML = 'gameRating: ' + games.results[i].metacritic;
        mainContainer.appendChild(div);
    }
}
window.onload = function appendData() {
    console.log('The games will load now.');
}

控制台中的输出：

{count: 797560, next: "https://api.rawg.io/api/games?key=CHANGED_FROM_MY_KEY&page=2",…}
count
: 
797560
description
: 
""
filters
: 
{years: [{from: 2020, to: 2022, filter: "2020-01-01,2022-12-31", decade: 2020,…},…]}
next
: 
"https://api.rawg.io/api/games?key=CHANGED_FROM_MY_KEY&page=2"
nofollow
: 
false
nofollow_collections
: 
["stores"]
noindex
: 
false
previous
: 
null
results
: 
[,…]
0
: 
{id: 3498, slug: "grand-theft-auto-v", name: "Grand Theft Auto V", released: "2013-09-17", tba: false,…}
1
: 
{id: 3328, slug: "the-witcher-3-wild-hunt", name: "The Witcher 3: Wild Hunt", released: "2015-05-18",…}
2
: 
{id: 4200, slug: "portal-2", name: "Portal 2", released: "2011-04-18", tba: false,…}
3
: 
{id: 5286, slug: "tomb-raider", name: "Tomb Raider (2013)", released: "2013-03-05", tba: false,…}
4
: 
{id: 4291, slug: "counter-strike-global-offensive", name: "Counter-Strike: Global Offensive",…}
5
: 
{id: 5679, slug: "the-elder-scrolls-v-skyrim", name: "The Elder Scrolls V: Skyrim",…}
6
: 
{id: 12020, slug: "left-4-dead-2", name: "Left 4 Dead 2", released: "2009-11-17", tba: false,…}
7
: 
{id: 13536, slug: "portal", name: "Portal", released: "2007-10-09", tba: false,…}
8
: 
{id: 4062, slug: "bioshock-infinite", name: "BioShock Infinite", released: "2013-03-26", tba: false,…}
9
: 
{id: 3439, slug: "life-is-strange-episode-1-2", name: "Life is Strange", released: "2015-01-29",…}
10
: 
{id: 802, slug: "borderlands-2", name: "Borderlands 2", released: "2012-09-18", tba: false,…}
11
: 
{id: 28, slug: "red-dead-redemption-2", name: "Red Dead Redemption 2", released: "2018-10-26",…}
12
: 
{id: 13537, slug: "half-life-2", name: "Half-Life 2", released: "2004-11-16", tba: false,…}
13
: 
{id: 4286, slug: "bioshock", name: "BioShock", released: "2007-08-21", tba: false,…}
14
: 
{id: 1030, slug: "limbo", name: "Limbo", released: "2010-07-21", tba: false,…}
15
: 
{id: 2454, slug: "doom", name: "DOOM (2016)", released: "2016-05-13", tba: false,…}
16
: 
{id: 3070, slug: "fallout-4", name: "Fallout 4", released: "2015-11-09", tba: false,…}
17
: 
{id: 32, slug: "destiny-2", name: "Destiny 2", released: "2017-09-06", tba: false,…}
18
: 
{id: 58175, slug: "god-of-war-2", name: "God of War", released: "2018-04-20", tba: false,…}
19
: 
{id: 11859, slug: "team-fortress-2", name: "Team Fortress 2", released: "2007-10-10", tba: false,…}
seo_description
: 
""
seo_h1
: 
"All Games"
seo_keywords
: 
""
seo_title
: 
"All Games"

我的想法是，我的第一个函数是请求api json和日志错误，或者显示json。第二个函数是获取该数据并将其附加到我的html中，但是分解我希望在它们自己的子div中显示的各个部分，以便以后可以对它们进行样式设置。

我确信有一种更简单、更优雅的方法来实现这一点，但是即使这个方法似乎也没有将任何东西放入我的html中。很明显，我做错了什么，但不知道是什么。

出于某种原因，我似乎一直在用JS碰壁，我可以看看函数，至少可以弄清楚它们做些什么，但是使用fetch的东西并不能比我的眼睛更远，更容易陷进去。

我看到游戏的console.log现在将加载，没有一个代码显示错误，所以我的猜测是，我试图指定和显示不同的字段是错误的。

为了扩展API，以防万一我要求它做的事情很明显：

{count: 797560, next: "https://api.rawg.io/api/games?key=5faa65d741d94e78b1e567a0a1fc580c&page=2",…}
count
: 
797560
description
: 
""
filters
: 
{years: [{from: 2020, to: 2022, filter: "2020-01-01,2022-12-31", decade: 2020,…},…]}
next
: 
"https://api.rawg.io/api/games?key=5faa65d741d94e78b1e567a0a1fc580c&page=2"
nofollow
: 
false
nofollow_collections
: 
["stores"]
noindex
: 
false
previous
: 
null
results
: 
[,…]
0
: 
{id: 3498, slug: "grand-theft-auto-v", name: "Grand Theft Auto V", released: "2013-09-17", tba: false,…}
added
: 
18001
added_by_status
: 
{yet: 456, owned: 10505, beaten: 4950, toplay: 527, dropped: 910, playing: 653}
background_image
: 
"https://media.rawg.io/media/games/456/456dea5e1c7e3cd07060c14e96612001.jpg"
clip
: 
null
dominant_color
: 
"0f0f0f"
esrb_rating
: 
{id: 4, name: "Mature", slug: "mature"}
genres
: 
[{id: 4, name: "Action", slug: "action", games_count: 161519,…},…]
id
: 
3498
metacritic
: 
91
name
: 
"Grand Theft Auto V"
parent_platforms
: 
[{platform: {id: 1, name: "PC", slug: "pc"}},…]
platforms
: 
[{,…},…]
playtime
: 
72
rating
: 
4.47
rating_top
: 
5
ratings
: 
[{id: 5, title: "exceptional", count: 3520, percent: 58.99},…]
ratings_count
: 
5892
released
: 
"2013-09-17"
reviews_count
: 
5967
reviews_text_count
: 
43
saturated_color
: 
"0f0f0f"
short_screenshots
: 
[{id: -1, image: "https://media.rawg.io/media/games/456/456dea5e1c7e3cd07060c14e96612001.jpg"},…]
slug
: 
"grand-theft-auto-v"
stores
: 
[{id: 290375,…}, {id: 438095,…}, {id: 290376,…}, {id: 290377,…}, {id: 290378,…}]
suggestions_count
: 
414
tags
: 
[{id: 31, name: "Singleplayer", slug: "singleplayer", language: "eng", games_count: 182311,…},…]
tba
: 
false
updated
: 
"2022-09-18T09:33:46"
user_game
: 
null

谢谢

Answer 1

您需要创建多个div元素。

                var div
                div = document.createElement("div");
                div.innerHTML = 'gameName: ' + games.results[i].name;
                mainContainer.appendChild(div);

                div = document.createElement("div");                            
                div.innerHTML = 'gameImage: ' + games.results[i].background_image;
                mainContainer.appendChild(div);

                div = document.createElement("div");
                div.innerHTML = 'gameRating: ' + games.results[i].metacritic;
                mainContainer.appendChild(div);
              }

您可能需要考虑创建父div，然后将子div添加到其子容器中，这样就可以对父容器进行样式设置。

还可以使用innerText而不是innerHTML，因为您是在添加文本，而不是html文本。

div.innerText = 'gameName: ' + games.results[i].name;

最后，您需要在加载时调用您的附加数据函数。

function appendData(
  // code here
}

window.onload = () => {
    console.log('The games will load now.');
    appendData(games)
}

另一个问题是在异步数据调用解决之前调用onLoad的情况。在这种情况下，不会设置games。解决方法可能是: 1.引导整个数据调用以在onLoad内部启动，或者2.在游戏解析后检查是否加载。