がどのように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に設定されている場合は、JavaScriptオブジェクトとしてdata-*属性値を設定および取得するために、値をJSON.stringify()とJSON.parse()を有効JSONを使用しています。あなたは、取得し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>