在data属性存储数组后，用JavaScript/jQuery读取仅获开头括号的问题

你直接将JSON字符串拼接进HTML属性值时，JSON内部的双引号和属性的双引号发生冲突，导致HTML解析器在遇到第一个内部双引号时就截断了属性值，所以只能读到数组的左括号[。

推荐两种解决方式，优先选第一种：

方式一：用jQuery的data()方法存储数据（更安全便捷） #

不用将数组转成JSON拼到HTML里，直接通过jQuery的data()方法给元素绑定数据，无需处理转义：

var array = [{"note": "Hey I love you!",
    "full_name": "Sarah James",
    "date_added": "14 September 2022"
},{
    "note": "Hey I love you too!",
    "full_name": "Billy Smith",
    "date_added": "15 September 2022"
}];

// 创建按钮元素并绑定数据
var $btn = $('<button class="viewTicketBtn">Click Here</button>');
$btn.data('test', array);
$('.o').append($btn);

// 点击时直接获取绑定的数组
$(document).on('click', '.viewTicketBtn', function(){ 
    var data = $(this).data('test');
    console.log(data);
});

方式二：转义JSON中的双引号（适合必须拼HTML字符串的场景） #

如果一定要拼接HTML字符串，需要把JSON里的双引号转义成HTML实体"，避免和属性的双引号冲突：

var array = [{"note": "Hey I love you!",
    "full_name": "Sarah James",
    "date_added": "14 September 2022"
},{
    "note": "Hey I love you too!",
    "full_name": "Billy Smith",
    "date_added": "15 September 2022"
}];

// 转义JSON中的双引号
var stringed = JSON.stringify(array).replace(/"/g, '"');

$('.o').append('<button data-test="'+stringed+'" class="viewTicketBtn">Click Here</button>');

$(document).on('click', '.viewTicketBtn', function(){ 
    var str = $(this).attr('data-test');
    // 将转义后的字符串解析回数组
    var data = JSON.parse(str);
    console.log(data);
});

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