HTMLのdata属性にJSONオブジェクトを格納する方法を徹底解説！jQueryで読み書きも自在

2024-07-27

HTMLのdata属性にJSONオブジェクトを格納し、jQueryで取得する方法

必要なもの

HTMLファイル
jQueryライブラリ

手順

JSONオブジェクトを作成する

まず、JavaScriptでJSONオブジェクトを作成します。JSONオブジェクトは、キーと値のペアの集合です。

var data = {
  "name": "田中 太郎",
  "age": 30,
  "city": "東京"
};

JSONオブジェクトをdata属性に格納する

次に、jQueryを使用してJSONオブジェクトをHTML要素のdata属性に格納します。

<div id="my-element" data-info='{"name": "田中 太郎", "age": 30, "city": "東京"}'></div>

上記の場合、data-info属性にJSON文字列が格納されます。

data属性からJSONオブジェクトを取得する

最後に、jQueryを使用してdata属性からJSONオブジェクトを取得します。

var jsonData = $("#my-element").data("info");
console.log(jsonData.name); // 田中 太郎
console.log(jsonData.age); // 30
console.log(jsonData.city); // 東京

JSONオブジェクトをdata属性に格納する際、**JSON.stringify()`関数を使用して文字列に変換する必要があります。
data属性からJSONオブジェクトを取得する際、**jQuery.parseJSON()`関数を使用してオブジェクトに変換する必要があります。
上記の例では、data-infoという属性名を使用していますが、任意の属性名を使用できます。

例

以下の例では、#user要素のdata属性に格納されているJSONオブジェクトを取得し、ユーザー名と年齢を出力します。

<div id="user" data-user='{"name": "山田 花子", "age": 25}'></div>

<script>
$(function() {
  var user = $("#user").data("user");
  console.log("名前：" + user.name);
  console.log("年齢：" + user.age);
});
</script>

この例では、次のように出力されます。

名前：山田 花子
年齢：25

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery で data 属性から JSON を取得</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div id="user" data-user='{"name": "山田 太郎", "age": 30, "city": "東京"}'></div>

  <script>
    $(function() {
      var user = $("#user").data("user");
      console.log("名前：" + user.name);
      console.log("年齢：" + user.age);
      console.log("出身地：" + user.city);
    });
  </script>
</body>
</html>

説明

HTML
- この HTML コードは、id="user" の div 要素を作成します。
- data-user 属性には、JSON オブジェクトが文字列形式で格納されています。
- JSON オブジェクトには、ユーザーの名前、年齢、出身地に関する情報が含まれています。
JavaScript
- $(document).ready() 関数は、DOM が完全にロードされた後に実行される関数を定義します。
- $("#user").data("user") は、#user 要素の data-user 属性から JSON 文字列を取得します。
- JSON.parse() 関数は、JSON 文字列を JavaScript オブジェクトに変換します。
- 取得したユーザー情報を使用して、コンソールにログを出力します。

実行結果

上記コードを実行すると、以下の出力がコンソールに表示されます。

名前：山田 太郎
年齢：30
出身地：東京

以下の例では、data 属性に格納された JSON オブジェクトを操作する方法を示しています。

例 1: JSON オブジェクトの値を更新する

<div id="user" data-user='{"name": "山田 太郎", "age": 30, "city": "東京"}'></div>

<script>
$(function() {
  var user = $("#user").data("user");
  user.age = 35; // 年齢を更新
  $("#user").data("user", user); // 更新された JSON オブジェクトを data 属性に格納

  console.log("更新後：");
  console.log("名前：" + user.name);
  console.log("年齢：" + user.age);
  console.log("出身地：" + user.city);
});
</script>

例 2: JSON オブジェクトに新しいプロパティを追加する

<div id="user" data-user='{"name": "山田 太郎", "age": 30, "city": "東京"}'></div>

<script>
$(function() {
  var user = $("#user").data("user");
  user.email = "[email protected]"; // 新しいプロパティを追加

  $("#user").data("user", user); // 更新された JSON オブジェクトを data 属性に格納

  console.log("新しいプロパティを追加後：");
  console.log("名前：" + user.name);
  console.log("年齢：" + user.age);
  console.log("出身地：" + user.city);
  console.log("メールアドレス：" + user.email);
});
</script>

attr()メソッドを使用して、data属性の値を取得することもできます。ただし、この方法で取得した値は文字列であることに注意する必要があります。JSONオブジェクトに変換するには、JSON.parse()関数を使用する必要があります。

<div id="user" data-user='{"name": "山田 太郎", "age": 30, "city": "東京"}'></div>

<script>
$(function() {
  var jsonString = $("#user").attr("data-user");
  var user = JSON.parse(jsonString); // 文字列を JSON オブジェクトに変換

  console.log("名前：" + user.name);
  console.log("年齢：" + user.age);
  console.log("出身地：" + user.city);
});
</script>

カスタムデータ属性名の使用

data-*という形式で任意の名前のデータ属性を作成できます。ハイフンを使用する場合は、jQueryでアクセスする際にキャメルケースに変換する必要があることに注意してください。

<div id="user" data-user-info='{"name": "山田 太郎", "age": 30, "city": "東京"}'></div>

<script>
$(function() {
  var user = $("#user").data("userInfo"); // キャメルケースでアクセス
  console.log("名前：" + user.name);
  console.log("年齢：" + user.age);
  console.log("出身地：" + user.city);
});
</script>