如何使用jquery检索数据属性值是一个对象数组

Question

我的data-attribute看起来像这样：

data-image="[object Object],[object Object] "

Answer 1

只有字符串/数字可以存储在属性中。 因此，如果要存储图像详细信息，只需存储图像的src即可。 如果由于某种原因您想要存储对象，请先将其转换为字符串，然后在检索时将其转换为对象。

//Convert to String 
var mystring = JSON.stringify(myobject); // store this in the attribute. 

//Convert to Object while retrieving 
var myobj = JSON.parse(mystring);

Answer 2

实际上，当你检索它时，你将只获得值为[object Object],[object Object]字符串。 您使用错误的语法将data-attribute保存在data-attribute 。 首先尝试将data-image值设置为JSON格式，然后保留data-image属性。 之后，您可以通过（请参阅注释）检索您的数据

 const dataArray = [ { name: 'Name1' }, { name: 'Name2' } ]; const div = $('#div'); div.data('image', JSON.stringify(dataArray)); // keep the attribute as string const retrievedDataImageAsJSON = div.data('image'); // retrieve the data attribute as string const dataObj = JSON.parse(retrievedDataImageAsJSON); // parse from JSON into JS objects. console.log(dataObj); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='div' data-image> </div> 

Answer 3

如果data-*属性设置为HTML，则使用值JSON.stringify()和JSON.parse()有效JSON来设置并获取data-*属性值作为JavaScript对象。 您可以使用HTMLElement.dataset获取和设置HTML data-*属性

 console.log( JSON.parse( document.querySelector("div").dataset.image ) ) 

 <!-- set `data-*` attribute value as valid `JSON` --> <div data-image='[{"a":123}, {"b":456}]'></div>