データ属性の値が配列の文字列である場合に値を配列として取得する方法

背景

業務でデータ属性の値が配列である場合の値を配列として取得するのに苦戦した為です。

<div data-validate='["work_location","required"]' >
</div>

const elm = document.querySelector('div');
const dataArrayAttr = elm.dataset.validate;
console.log(dataArrayAttr);

"['work_location','required']"

データ属性の値が配列の文字列である場合に値を配列として取得する方法

データ属性にJSON文字列形式で値を設定しているので、JSON.parseを使えば良いです。

const elm = document.querySelector('div');
const rawdataArrayAttr = elm.getAttribute('data-validate');
const dataArrayAttr = JSON.parse(rawdataArrayAttr);
console.log(dataArrayAttr);

["work_location","required"]

そもそもデータ属性は文字列で値を設定する必要があるので、複数の値を設定する為に以下のように書かれていたと思います。

<div data-validate='["work_location","required"]' >
</div>

最後に

• 書くのも恥ずかしいくらいですが、些細なことに気づけませんでした。。
• 一つずつ理解していきたいです

参考