如何檢索數據屬性值是對象的數組使用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>