1

Всем привет. Столкнулся с проблемой, при попытке опубликовать массив элементов типа 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 - это переменная типа массив с моими элементами типа класс.

4
  • key - это ключ, в данном случае индекс элемента, а не сам элемент
    – Grundy
    4 янв 2022 в 11:40
  • Я это понимаю, но я не понимаю, как обратиться к самому элементу, а точнее, к его свойствам. Кроме того, даже так, у меня по идее должен опубликоваться хотя бы список ключей, но публикуется лишь ${key}. 4 янв 2022 в 12:01
  • var obj = DECK_PL[key] и обращайся к свойствам obj
    – Grundy
    4 янв 2022 в 14:52
  • Спасибо, попробую на досуге. 4 янв 2022 в 15:21

1 ответ 1

1
DECK_PL.forEach(c => {
  var row = document.createElement('tr');
  row.innerHTML = `<td>${c.suits}</td>`;
  document.querySelector('.my_cards').appendChild(row);
});
2
  • Спасибо, друг! Наконец-то заработало! Я уже третий день бьюсь над этой проблемой! 4 янв 2022 в 14:19
  • @drakoblack Пожалуйста. Знак "галочка" - слева от ответа.
    – user176262
    4 янв 2022 в 14:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.