Всем привет. Столкнулся с проблемой, при попытке опубликовать массив элементов типа class. Итак, подробнее о проблеме. В общем создал некий класс, назовем его "Card", дальше я создал кучу переменных с данным классом, но с разными свойствами для него (например: тип карты, атака, защита, здоровье). Ключевым является "тип карты", от него меняются все остальные параметры. Дальше я запихнул все эти переменные типа класс в массив (а-ля колода (Deck)) Далее написал несколько функций, которые обрабатывали этот массив и все было прекрасно, пока не появилась у меня нужда вывести содержимое массива на HTML страницу, ну, чтобы визуализировать эту колоду. И вот тут у меня начались проблемы. Те, примеры, которые предложил интернет, оказались совершенно непригодными для решения данной проблемы, так как в самом худшем случае работали с массивами массивов (это просто усложненная версия обычного массива), но я не нашел ни одного примера, обработки массива из элементов типа class. И теперь понятия не имею, как извлечь содержимое массива для публикации в HTML. Что мне нужно: есть массив элементов типа класc, который в консоли отображается вот так:
(50) [Cards, Cards, Cards, Cards, Cards, Cards, Cards, Cards, Cards,
Cards, Cards, Cards, Cards, Cards, Cards, Cards, Cards, Cards,
Cards, Cards, Cards, Cards, Cards, Cards, Cards, Cards, Cards,
Cards, Cards, Cards, Cards, Cards, Cards, Cards, Cards, Cards,
Cards, Cards, Cards, Cards, Cards, Cards, Cards, Cards, Cards,
Cards, Cards, Cards, Cards, Cards]**
Каждый элемент выглядит так:
0: Cards {suits: 'militia', attak: 10, attaktipe: '⚔', accuracy: 80,
health: 100, …}
1: Cards {suits: 'militia', attak: 10, attaktipe:
'⚔', accuracy: 80, health: 100, …}
Мне нужно опубликовать на ХТМЛ таблицу из этих элементов, которая будет отображать все свойства карт. Как это сделать? Я пытался сделать это через циклы, через просто вывод через свойства массива, но ничего не помогло. Подозреваю, что проблема в названии класса Cards, к которому нужно как-то обращаться, чтобы обьяснить, какие свойства и откуда брать, но не понимаю, как это сделать. Вот один из примеров, что я пытался реализовать:
document.querySelector('.my_deck').innerHTML = '<table class="my_cards"></table>';
for (key in DECK_PL) {
var row = document.createElement('tr');
row.innerHTML = '<td>${key}</td>';// так же пробовал варианты вроде ${key.suits}, ${key.Cards.suits}, ${Cards.suits} и ${suits} - результата никакого.
document.querySelector('.my_cards').appendChild(row);}
В результате, элемент ${key}
вообще не воспринимается системой, как переменная. Он просто читается, как текст.
DECK_PL - это переменная типа массив с моими элементами типа класс.
key
- это ключ, в данном случае индекс элемента, а не сам элементvar obj = DECK_PL[key]
и обращайся к свойствам obj