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

Question

[Junior Development]

Подскажите, как грамотно вывести данные с массива используя мотод .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;

Comments

[Сергей Сергей]

category.map( (c,i) => ( { cat: c, att: attr[ i ] } ).map( toHtml )

[Junior Development]

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

Не могли бы вы подсказать как использовать его в моём коде?
Так сказать, готовый пример )

Исходя из вашего примеры, создаётся новый массив исходя из предложенного элементы ( в данном случае это массив category ), не пойму как мы берем данные из массива attr если метод map используем для массива category

[Богдан Царик]

Junior Development,

не пойму как мы берем данные из массива attr если метод map используем для массива category

метод map имеет три параметра можно почитать тут

const toHtml = ({ category, att }) => ` <button class='category-btn' data-categoty='${att}'>${ category }</button>`
const categories = this.testdata[0].category

categories.map((
  category /* Текущий обрабатываемый элемент массива. */,
  index /* Индекс текущего обрабатываемого элемента в массиве. */
) => {
  return {
    category: category,
    att: attr[index] /* Элемент массива attr с индексом равным index */
  }
}).map(toHtml)

Возможно поможет. Если попробуешь более понятно сформулировать вопрос, будет больше шансов получить нужный ответ.

[Сергей Сергей]

Так уж получилось, что эта структура данных в моём варианте с map() требует применения функций с внешними данными помимо аргументов. Здесь получаются две переменных с массивами category и attr в одной области видимости, а потом attr становится внешней для обработчика внутри map() массива category.
Вместо заморочек с map() лучше сделать через простой цикл с индексами. Ведь видно, что даже в map() индекс понадобился. Без индексов можно через reduce() сделать, но там будет много почти бесполезной борьбы с изначальной структурой данных.
Готовый пример лень готовить.

Answer 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>"