arvknutov
@arvknutov
Frontend-developer

Как вывести данный используя метод .map?

Подскажите, как грамотно вывести данные с массива используя мотод .map()?
Иными словами, мне нужно вывести название кнопки и дата атрибут.

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

Имеется вот такой массив с данными
this.testdata        = [
            {
                category: ['Категория-1_1', 'Категория-2_1','Категория-3_1',],
                attr: [ 'attr1', 'attr2', 'attr3'],
            },
            {
                category: ['Категория-1_2', 'Категория-2_2','Категория-3_2',],
                attr: [ 'attr1', 'attr2', 'attr3'],
            }
        ]


Вот таким способом я вывожу данные
const toHtml = (item) => ` <button class='category-btn' data-categoty='attr'>${ item }</button>`;
    const html = this.testdata[0].category.map(toHtml).join('');
    categoriesBtns.innerHTML = html;
  • Вопрос задан
  • 98 просмотров
Решения вопроса 1
Здесь проблема со структурой. Если атрибут относится к категории, он должен быть внутри её модели, а не отделен от неё. Поэтому и не получается обратиться сразу к двум свойствам из одного цикла, плюс возникает сложность по определению соответствий атрибутов и названий категорий.

Текущую структуру можно вывести так:
const testdata = [
            {
                category: ['Категория-1_1', 'Категория-2_1','Категория-3_1',],
                attr: [ 'attr1', 'attr2', 'attr3'],
            },
            {
                category: ['Категория-1_2', 'Категория-2_2','Категория-3_2',],
                attr: [ 'attr1', 'attr2', 'attr3'],
            }
        ];

const templates = testdata.reduce((acc, item) => {
  return acc.concat(...item.category.map((category, index) => {
    const attr = item.attr[index] || '';
    return `<button class='category-btn' data-categoty='${attr}'>${category}</button>`;
  }));
}, []);


На выходе будет массив:
0: "<button class='category-btn' data-categoty='attr1'>Категория-1_1</button>"
1: "<button class='category-btn' data-categoty='attr2'>Категория-2_1</button>"
2: "<button class='category-btn' data-categoty='attr3'>Категория-3_1</button>"
3: "<button class='category-btn' data-categoty='attr1'>Категория-1_2</button>"
4: "<button class='category-btn' data-categoty='attr2'>Категория-2_2</button>"
5: "<button class='category-btn' data-categoty='attr3'>Категория-3_2</button>"
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы