Помогите оптимизировать создание таблицы с результатами, перебирая содержимое объектов...
//БЛОК 1
var cardsData = [{
playerTagName: "Вася",
playerUrl: "/players/",
playerFirstName: "playerFirstName",
playerFirstRank: "10000",
playerSecondName: "playerSecondName",
playerSecondRank: "20000",
playerThirdName: "playerThirdName",
playerThirdRank: "30000",
}, {
playerTagName: "Петя",
playerUrl: "/players/",
playerFirstName: "playerFirstName",
playerFirstRank: "10000",
playerSecondName: "playerSecondName",
playerSecondRank: "20000",
playerThirdName: "playerThirdName",
playerThirdRank: "30000",
}, {
playerTagName: "Коля",
playerUrl: "/players/",
playerFirstName: "playerFirstName",
playerFirstRank: "10000",
playerSecondName: "playerSecondName",
playerSecondRank: "20000",
playerThirdName: "playerThirdName",
playerThirdRank: "30000",
}];
const capitalize = (s) => {
if (typeof s !== 'string') return ''
return s.charAt(0).toUpperCase() + s.slice(1)
}
var tableType = 4;
var absoluteUrl = 'my-game.com';
var outerWrapper = document.querySelector('#task.rank_table');
var cardList = document.querySelector('#task.rank_table .inner-wrapper');
//БЛОК 2 - создание элементов карточки
var makeElement = function(tagName, className, text) {
var element = document.createElement(tagName);
if (className) {
element.classList.add(className);
}
if (text) {
element.innerHTML = text;
}
return element;
};
var tableHeader = '<div class="rank_header_row"><div>Тут заголовок</div></div>';
//БЛОК 3 - создание самой карточки
var createTable = function(card) {
var wrapper = makeElement('div', 'rank_wrapper');
var mainItem = makeElement('div', 'main_rank');
var tagName = makeElement('div', 'diseasse__title');
if (tableType === 4) {
wrapper.innerHTML = tableHeader;
}
if (card.playerUrl) {
var itemLink = makeElement('a', 'tagLink', card.playerTagName);
itemLink.href = absoluteUrl + card.playerUrl;
} else {
var itemLink = makeElement('span', 'tagLink', card.playerTagName);
}
tagName.appendChild(itemLink);
mainItem.appendChild(tagName);
if (wrapper && card.playerFirstName) {
var firstItem = makeElement('div', 'first_Rank');
var firstName = makeElement('div', 'card__name', card.playerFirstName);
firstItem.appendChild(firstName);
var firstRank = makeElement('div', 'card__Rank', card.playerFirstRank);
wrapper.appendChild(firstItem);
}
if (wrapper && card.playerSecondName) {
var secondItem = makeElement('div', 'second_Rank');
var secondName = makeElement('div', 'card__name', card.playerSecondName);
secondItem.appendChild(secondName);
var secondRank = makeElement('div', 'card__Rank', card.playerSecondRank);
wrapper.appendChild(secondItem);
}
if (wrapper && card.playerThirdName) {
var thirdItem = makeElement('div', 'third_Rank');
var thirdName = makeElement('div', 'card__name', card.playerThirdName);
thirdItem.appendChild(thirdName);
var thirdRank = makeElement('div', 'card__Rank', card.playerThirdRank);
wrapper.appendChild(thirdItem);
}
if (wrapper && card.playerFourthName) {
var fourthItem = makeElement('div', 'fourth_Rank');
var fourthName = makeElement('div', 'card__name', card.playerFourthName);
fourthItem.appendChild(fourthName);
var fourthRank = makeElement('div', 'card__Rank', card.playerFourthRank);
wrapper.appendChild(fourthItem);
}
if (wrapper && card.playerFifthName) {
var fifthItem = makeElement('div', 'fifth_Rank');
var fifthName = makeElement('div', 'card__name', card.playerFifthName);
fifthItem.appendChild(fifthName);
var fifthRank = makeElement('div', 'card__Rank', card.playerFifthRank);
wrapper.appendChild(fifthItem);
}
return wrapper;
};
//проверка типа нужной таблицы
if (tableType !== 4) {
var z = document.createElement('div');
z.classList.add('rank_wrapper');
z.innerHTML = tableHeader;
outerWrapper.prepend(z);
};
//БЛОК 4 - заключительный цикл для создания нужного количества карточек
for (var i = 0; i < cardsData.length; i++) {
var cardItem = createTable(cardsData[i]);
cardList.appendChild(cardItem);
};
<div id="task" class="rank_table">
<div class="inner-wrapper"></div>
</div>
var winnerBadge = makeElement('img','winner-bange')
firstItem.appendChild(winnerBadge);
Но добавляется он только последнему
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Я тут написал код, вроде все правильно но компилятор c++ 14 выводит: