data属性传入JSON对象后取值得到[object Object]无法访问的问题咨询

出现[object Object]返回值的核心问题，出在动态拼接DOM字符串的逻辑上：JS中当非字符串类型的对象和普通字符串做拼接运算时，会自动调用对象的默认toString()方法，普通对象的toString()固定返回[object Object]。你拼接DOM时直接把fileObj对象塞到data-details的属性值位置，实际存进DOM属性的根本不是对象的实际内容，就是这串无意义的固定字符串，后续不管怎么调用parse、stringify，都不可能从这串字符串里提取出原始对象的值。
另外你之前尝试的读取代码本身存在语法错误：$(this).(attr("data-details"))这里多了个多余的点，就算修正语法，因为属性内存储的不是合法JSON内容，也没法正常解析。

• 拼接DOM时，不能直接拼接原始对象，必须先把对象序列化成JSON字符串，同时对序列化后的字符串做编码处理，避免JSON内的特殊字符截断DOM属性的闭合引号
• 读取属性值时，按照编码的逆流程解码、解析，拿到原始对象

修正后的循环拼接代码：

for (var i = 0; i < data.length; i++) {
  var fileObj = JSON.parse(data[i][2]);
  // 对存储的JSON做编码，避免特殊字符破坏DOM结构
  var encodedDetails = encodeURIComponent(JSON.stringify(fileObj));
  $($idName)
    .append('<a><li id="asdf" class="list-group-item" data-details="'
    + encodedDetails
    + '" data-filename="'
    + data[i][0]
    + '">'
    + fileObj.description
    + '</li></a>');
}

点击事件内读取存储值的逻辑：

// 先取属性值，解码后再解析JSON
var rawDetail = $(this).attr("data-details");
var det = JSON.parse(decodeURIComponent(rawDetail));

• 绝对不要直接把原始对象拼接到DOM字符串的属性位置，这是[object Object]问题最常见的触发原因
• 序列化后的JSON字符串如果包含双引号、尖括号、&等HTML特殊字符，不做编码直接存储，会直接撞破属性的闭合引号，导致DOM结构错乱、属性值截断
• 不要混淆存储和读取的处理顺序：存储流程是 原始对象→JSON字符串→编码内容，读取必须按照 解码内容→JSON解析→原始对象的逆流程操作，顺序错误会直接导致解析失败

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