无法访问jQuery data属性中存储的对象数组，该如何解决？

你遇到的问题核心在于直接将JavaScript对象赋值给data-*属性时，会被自动转换为字符串，而对象默认的toString()方法返回的就是[object Object]，这就是你读取时得到这个结果的原因。

为什么会这样？ #

data-*属性本质上是DOM元素的字符串属性，浏览器只能存储字符串类型的值。当你尝试把一个对象直接赋值给它时，JavaScript会自动调用对象的toString()方法进行类型转换，而普通对象的toString()默认返回[object Object]，所以最终存储到DOM里的就是这个字符串，而不是你期望的对象内容。

正确的解决方法 #

要在data-*属性中存储对象/数组，需要先将对象序列化为JSON字符串，读取时再反序列化为对象，或者直接使用jQuery的.data()方法来简化这个过程。

1. 修改存储逻辑：序列化对象为JSON字符串

在构建DOM字符串时，使用JSON.stringify()把obj[i].configs转换成JSON格式的字符串：

dom = '<ul class="obj-list">';
for (let i = 0; i < obj.length; i++) {
  // 将对象序列化为JSON字符串
  const configStr = JSON.stringify(obj[i].configs);
  dom += `<li tabindex="${i}" data-index="${i}" data-resource-config="${configStr}">`;
  // 别忘了补充li的闭合标签和内容...
}
dom += '</ul>';

2. 读取时的两种方式

方式一：推荐使用jQuery的.data()方法

jQuery的.data()方法会自动识别JSON格式的data-*属性值，并帮你完成反序列化，直接返回对象/数组：

$(yourUlSelector).on('click', 'li', function(e) {
  // 注意这里用驼峰命名：data-resource-config → resourceConfig
  const configs = $(e.currentTarget).data('resourceConfig');
  console.log(configs); // 这里就是你原来的对象/数组了
});

提示：jQuery的.data()会维护一个内部缓存，第一次读取后会把解析后的对象存在缓存里，后续读取更高效，而且不需要手动处理JSON解析。

方式二：使用.attr()配合JSON.parse()

如果你一定要用.attr()读取，需要手动把字符串反序列化为对象：

$(yourUlSelector).on('click', 'li', function(e) {
  const configStr = $(e.currentTarget).attr('data-resource-config');
  try {
    const configs = JSON.parse(configStr);
    console.log(configs);
  } catch (err) {
    // 处理JSON解析失败的情况，比如字符串格式错误
    console.error('解析配置失败:', err);
  }
});

额外注意事项 #

• 确保obj[i].configs是可序列化的JSON对象：比如不能包含函数、Symbol、循环引用等，否则JSON.stringify()会失败或者丢失数据。
• 尽量避免直接用.attr()操作复杂类型的data-*属性，.data()是更合适的选择，它专门用于处理DOM元素的关联数据，支持多种类型。

内容的提问来源于stack exchange，提问作者StrugglingCoder