Чтобы с помощью JavaScript считать значение data-атрибутов, нужно использовать свойство dataset. Пример:

HTML:
<div class="control" data-filtername="walden"></div>

JavaScript:
var control = document.querySelector('.control');
var filter = control.dataset.filtername;
// в переменной filter теперь строка «walden»

В свойстве dataset HTML-элемента хранятся все значения его data-атрибутов. Обратиться к ним можно по названию data-атрибута, удалив из названия приставку data-.

Добавлять содержимое в HTML-элемент через JavaScript можно с помощью свойства innerHTML:

var control = document.querySelector('.control');
control.innerHTML = 'walden';

Присвоенная свойству innerHTML строка заменяет всё содержимое HTML-элемента. В этой строке можно использовать любой HTML-код.

Давайте попробуем получить значение data-атрибута из JavaScript и записать полученную строку в переключатель.