入れ子になったプロパティを持つHTML SetAttribute

Question

これはどこかで答えられると確信していますが、見た目を見つけることができない用語知識の欠如です。

私は、サーバーからロードされたいくつかのjsonデータの結果として、いくつかのHTMLを動的に作成しています。

私は、createElementとsetAttributeを使用してhtmlを作成し、それを本体に追加しています。

しかし、私の動的HTMLには、さらにネストされたプロパティを持つ "data-"属性が含まれています。

li.setAttribute("data-item", '{"width": 100, "height": 100, "properties": 
       { "Name": "foo", "Surname": "bar" }}'); 

しかし、その後、私は私のjavaスクリプト内の別の場所のデータ項目を使用するようになったときに、属性が認識されます。実行しているとき、私はいくつかの成功を収めている

<li> 
    <span class=item data-item='{"width": 100, "height": 100, 
    "properties": { "Name": "foo", "Surname": "bar" }}'></span> 
</li> 

：例の最終目標は、このようなありますオブジェクトではなく文字列として扱います。 HTMLをハードコードすると、データアイテムがオブジェクトとして正しく読み込まれます。私は間違ってこの属性を設定しているので、私はそれがあるはずの仮定を作った。

Answer 1

プロパティは文字列として設定されているので、あなたは文字列を取得している、あなたはそれを解析した後、オブジェクトとしてデータを取得することができますそのような：あなたは属性にアクセスするにはどうすればよい

var li = document.createElement('li'); 
 
li.id = "li1"; 
 
li.setAttribute("data-item", '{"width": 100, "height": 100, "properties": { "Name": "foo", "Surname": "bar" }}'); 
 
li.innerHTML = "SAMPLE li"; 
 
document.body.appendChild(li); 
 

 

 
var data = document.getElementById('li1').getAttribute('data-item'); 
 
data = JSON.parse(data); 
 
console.log(data);

Answer 2

あなたがオブジェクトにそれを回すためにJSON.parseを使用することができます。

var result = JSON.parse('{"width": 100, "height": 100, "properties": { "Name": "foo", "Surname": "bar" }}'); 
// result.width => 100 
// result.properties.Name => "foo"  etc...