如何检索数据属性值是对象的数组使用jQuery

Question

我的数据属性看起来是这样的：

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-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的值，JSON.stringify()和JSON.parse()来设置和获取data-*属性值，JavaScript对象。你可以使用HTMLElement.dataset

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

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