Как получить id из data-атрибута?

Question

[Бифштекс]

Всем привет!
Есть ссылка с data-атрибутом:

<a href="#" class="main-grid-row-action-button" data-actions="([{'text':'Выбрать','default':true,'onclick':'tbl_product_search_crm_entity_product_list_helper.SelEl({\'id\':\'48597\',\'type\':\'E\'}, this);'}])"></a>

Как правильно перебрать этот массив в JS и вытащить id?

Comments

[Александр]

Вы можете использовать свойство dataset элемента HTML для доступа к данным атрибутов data-*.

Например:

let element = document.querySelector('.main-grid-row-action-button');
let data = element.dataset.actions;

Затем, используя JSON.parse() парсить этот строковый массив:

let actions= JSON.parse(data);
actions.forEach(action =>{
  let id = action.id;
  console.log(id);
})

Или

let actions= JSON.parse(data);
for(let action of actions){
  let id = action.id;
  console.log(id);
}

Answer 1

[PantyDev]

Смущают скобочки в data-actions="()". Это не стандартная разметка JSON.

const element = document.querySelector(".main-grid-row-action-button");
if(element) {
    const actions = element.dataset.actions;
    const toParse = actions.slice(1,-1); //удаляем странные скобки
    const parsed = JSON.parse(toParse); 
    foreach(const action in parsed) {
        const startIndex = action.onclick.indexOf("id\':\'");
        const endIndex = action.onclick.indexOf("\'", startIndex);
        const id = action.onclick.substring(startIndex + "id\':\'".length, endIndex - startIndex);
        console.log(id);
    }

}

Comments

[Бифштекс]

Спасибо, сделал так, всё работает

document.querySelectorAll('.main-grid-row-action-button').forEach(function(el) {
		el.onclick = function() {
			const actions = el.dataset.actions;
			if (actions) {
				const toParse = actions.slice(2,-2); //удаляем странные скобки
				const newText = toParse.replace (/'/g, '"');
				const parsed = JSON.parse(newText);
				const startIndex = parsed.onclick.indexOf('\"id\":\"');
				const endIndex = parsed.onclick.indexOf('",\"type\"');
				const id = parsed.onclick.substring(startIndex + '\"id\":\"'.length, endIndex);
				console.log(id);
			}
		}
	});