javascript - 生成 html 时，将 .push() 填充的数组存储在 html 数据属性中

Question

如果我将数组存储在数据属性中，例如 $('#test1').data('array-test',["one","one","one","one","one"])或写在 html 中，如 <div data-array-test='["one","one","one","one","one"]'> </div>当我调用 $('#test1').data('array-test')我得到一个数组。

但是，如果我使用循环填充一个数组，然后在生成 html 时将该数组添加到 html 中，如下所示，我将返回一个字符串而不是数组。我已经注释掉了我也尝试过的其他一些方法。

我怎么能有retrievedVal2下面返回了一个数组？]

请注意，在我的实际用例中，属性将包含多维数组

var retrievedVal1=$('#test1').data('array-test');

var myArray=[];
for(var i = 0;i<5;i++){
    myArray.push("one");
}
// $('#test2').append('<div id="test3" data-array-test="'+myArray+'"></div>');
// $('#test2').append('<div id="test3" data-array-test=\''+myArray+'\'></div>');
$('#test2').append('<div id="test3" data-array-test=\''+myArray.toString()+'\'></div>');

var retrievedVal2=$('#test3').data('array-test');
// var retrievedVal2=JSON.parse( $('#test3').data('array-test')); // gives "Uncaught SyntaxError: Unexpected token o"


var test;

<div id="test1" data-array-test='["one","one","one","one","one"]'></div><br><br>
<div id="test2"></div>

Answer 1

myArray.toString() 生成 one,one,one。你需要的是 ["one","one","one"]。

使用 JSON.stringify(myArray) 为数组创建正确的字符串格式。

$('#test2').append('<div id="test3" data-array-test=\''+JSON.stringify(myArray)+'\'></div>');