JavaScript Помогите оптимизировать код

109
03 мая 2021, 15:20

Помогите оптимизировать создание таблицы с результатами, перебирая содержимое объектов...

    //БЛОК 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>

  • Объекты могут быть разной длины.
  • Массив очень большой, в примере только 3 объекта.
  • Иногда каждому одинаковому ключу нужно добавлять одинаковый элемент, например
var winnerBadge = makeElement('img','winner-bange')
firstItem.appendChild(winnerBadge);

Но добавляется он только последнему