Здесь проблема со структурой. Если атрибут относится к категории, он должен быть внутри её модели, а не отделен от неё. Поэтому и не получается обратиться сразу к двум свойствам из одного цикла, плюс возникает сложность по определению соответствий атрибутов и названий категорий.
Текущую структуру можно вывести так:
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>"
