data属性で配列を使う

data属性で配列を使う時に少し詰まったので、試した内容をメモしておきます。

サンプルコード

ダブルクォーテーションでdata属性の値を括り、値を配列形式にしてみます。

HTML

<div class="article" data-tag="['A', 'B', 'C']">テスト</div>

JavaScript

$(function() {
	// attrで取得
	var attrValue = $('.article').attr('data-tag');
	console.log(attrValue); // ['A', 'B', 'C']
	console.log(attrValue[0]); // [

	// dataで取得
	var dataValue = $('.article').data('tag');
	console.log(dataValue); // ['A', 'B', 'C']
	console.log(dataValue[0]); // [
});

この場合、取得した値は文字列として扱われているようでした。
ダブルクォーテーションで配列全体を括った場合のデモページ
　

シングルクォーテーションで値全体を括るように変更してみます。

HTML

<div class="article" data-tag='["A", "B", "C"]'>テスト</div>

JavaScript

$(function() {
	// attrで取得
	var attrValue = $('.article').attr('data-tag');
	console.log(attrValue); // ["A", "B", "C"]
	console.log(attrValue[0]); // [

	// dataで取得
	var dataValue = $('.article').data('tag');
	console.log(dataValue); // ["A", "B", "C"]
	console.log(dataValue[0]); // A
});

この場合、data()を使うと配列形式として取得することができました。
シングルクォーテーションで配列全体を括った場合のデモページ
　

オブジェクトの場合も同様に試してみます。

HTML

<div class="article" data-profile="{'name':'suzuki','age':21}">テスト</div>

JavaScript

$(function() {
	// attrで取得
	var attrValue = $('.article').attr('data-profile');
	console.log(attrValue); // {'name':'suzuki','age':21}
	console.log(attrValue['name']); // undefined

	// dataで取得
	var dataValue = $('.article').data('profile');
	console.log(dataValue); // {'name':'suzuki','age':21}
	console.log(dataValue['name']); // undefined
});

配列の時と同様に、取得した値は文字列として扱われているようでした。
ダブルクォーテーションでオブジェクト全体を括った場合のデモページ
　

シングルクォーテーションで値全体を括るように変更してみます。

HTML

<div class="article" data-profile='{"name":"suzuki","age":21}'>テスト</div>

JavaScript

$(function() {
	// attrで取得
	var attrValue = $('.article').attr('data-profile');
	console.log(attrValue); // {"name":"suzuki","age":21}
	console.log(attrValue['name']); // ndefined

	// dataで取得
	var dataValue = $('.article').data('profile');
	console.log(dataValue); // {name: "suzuki", age: 21}
	console.log(dataValue['name']); // suzuki
});

配列の時と同様に、data()を使うとオブジェクト形式として取得することができました。

シングルクォーテーションでオブジェクト全体を括った場合のデモページ
　

きちんとした形式で値を扱いたい場合、attr()ではなくdata()を使用した方がいいようです。
　

【参考サイト】

• HTML5のdata属性に配列やオブジェクトを格納してjQueryで取得する│.dotown lab
• HTML5 カスタムデータ属性「data-*」にJavaScript、jQueryからアクセスする方法 – ROCHAS