Недавно я начал работать с Javascript, но не знаю DOM. У меня есть список пользователей, которым я хочу создать карточки пользователей для использования библиотеки Materialize. Мой список выглядит так (добавьте изображение): это ядро, с которым я работал раньше, но теперь я хочу, чтобы массив создавал карточки с пользователями из списка. Как я могу это сделать? мне нужно иметь несколько div, которые используют карту, в моем HTML?
window.addEventListener("load", () => {
const key = "bjbbjkbkkj"
const xblUserIdentifiers = ["CompDredd", "DrewWavy","YOUNGBLOOD4710"];
const psnUserIdentifiers = ["KingDroolz_YT", "danielnba96", "BobDroolz_YT", "sugabooga3838" ];
// const userCardInfo = {};
const platform = 'psn';
// const platform = 'xbl';
// const platforms = ['xbl', 'psn'];
function fetchUserInfo(userId) {
let user = {};
const proxy = "https://cors-anywhere.herokuapp.com/";
const newApiRequest = `${proxy}https://public-api.tracker.gg/v2/apex/standard/profile/${platform}/${userId}`;
const xhttp = new XMLHttpRequest();
xhttp.open('GET', newApiRequest, true);
xhttp.setRequestHeader('Access-Control-Allow-Origin', '*');
xhttp.setRequestHeader('Access-Control-Allow-Headers', '*');
xhttp.setRequestHeader('Access-Control-Allow-Methods', '*');
xhttp.setRequestHeader('TRN-Api-Key', key);
xhttp.send();
return fetch(newApiRequest)
.then(response => {
if(response.ok){
return response.json();
}
return Promise.reject(response)
})
.then(data => {
const {platformInfo, segments} = data.data;
// console.log(segments, "segments");
// for(let i=0; i<=segments.length-2; i++) {
// const {datamage, kills, level} = segment[i];
let kills = 'No kills value';
let damage = " No Damange Value";
let level = "No leve value";
let segmentStats = segments[0].stats;
console.log(segmentStats, "stats");
if(segmentStats && segmentStats.kills){
kills = segmentStats.kills.value;
} else {
kills;
}
if(segmentStats.damage && segmentStats.damage.value){
damage = segmentStats.damage.value;
}
damage;
if(segmentStats.level && segmentStats.level.value){
level = segmentStats.level.value;
}
user.level = level;
user.kills = kills;
user.damage = damage;
user.level = level;
// }
user.userAvatar = platformInfo.avatarUrl;
user.platform = platformInfo.platformSlug;
user.userHandle = platformInfo.userHandle;
return user;
})
}
function callUsers(platform, userIdentifiers){
let usersInformation = Promise.all(userIdentifiers.map((userId) =>
fetchUserInfo(userId))).then(responseArray => responseArray);
return usersInformation;
}
// callUsers('psn', psnUserIdentifiers);
function createUserCards(){
callUsers('psn', psnUserIdentifiers).then(users => {
users.map((userInfo, i) => {
console.log(userInfo, "userInfo");
const imageEle = document.getElementById('user-image')
const newEl = document.createElement('div');
console.log(newEl);
}
// document.getElementsByTagName("img")[i].src = userInfo.userAvatar
// let name = document.getElementsByTagName("span")[i];
// name.innerHTML = userHandle);
);
})
};
createUserCards();
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="materialize.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="index.css"/>
<title>Lemon</title>
</head>
<body>
<div class="header center-align">
<h1><bold>APEX Info (Season 2)</bold></h1>
</div>
<!-- <div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">Player ID</label>
</div>
</div>
</form>
</div> -->
<div class="container">
<input type="text" id="player-search-filter" placeholder="Search players...">
<div class="card-list row">
<div class="card col s4">
<div id="user-image" class="card-image waves-effect waves-block waves-light" >
<img class="activator" src="io.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Eball<i class="material-icons right">more_vert</i></span>
<span> platform </span>
<div>
User Stats >
</div>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4"> User Stats<i class="material-icons right">close</i></span>
<div>
Kills:<span class="kills">TEST</span>
</div>
<div >
Level:<span class="level"></span>
</div>
<div >
Damage Dealt:<span class="damage-dealt"></span>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="materialize.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>