HTMLオプションからカスタム属性を取得するのに問題があります。戻って[オブジェクトオブジェクト]を返す

Question

私はこの1日中、一日中苦労しています。ハードコーディングされたJSONファイルをajax呼び出しし、カスタム属性を使用してオプションタグに内容の一部を保存しようとしています。私がカスタム属性に格納しているデータを取得しようとすると、私は[object Object]を取得し続けます。 JSON.stringify（）にしようとすると、私はちょうど "[object Object]"を取得します（前と同じですが、二重引用符で囲まれています）。

いくつかのアドバイスは非常に役に立ちます。

これは、HTMLでの私の現在空selectタグである：

<select id="attackList"></select> 

実際のJSONファイル：

$.ajax({ 
    url: attackerFileName, 
    dataType: 'json', 
    type: 'get', 
    cache:true, 
    success: function(data){ 
     $(data.attacks).each(function(index,value){ 
      console.log(value.attackData); 
      dropdownOptions.append($("<option></option>").attr("data-value", value.attackData).text(value.attackName)); 
     }); 
    } 
}); 

そして、JS：selectタグを移入

{"attacks":[ 
{ 
    "attackName":"Jab (1)", 
    "attackData":{"hitFrame":"9", "faf":"26", "damage":"1.5"} 
}, 

{ 
    "attackName":"Jab (3)", 
    "attackData":{"hitFrame":"11", "faf":"34", "damage":"2.7"} 
}, 

{ 
    "attackName":"Dash Attack (Early)", 
    "attackData":{"hitFrame":"15", "faf":"47", "damage":"10"} 
}, 

{ 
    "attackName":"Dash Attack (Late)", 
    "attackData":{"hitFrame":"21", "faf":"47", "damage":"8"} 
}, 

{ 
    "attackName":"Forward Tilt (1)", 
    "attackData":{"hitFrame":"12", "faf":"32", "damage":"3.5"} 
}, 

{ 
    "attackName":"Forward Tilt (3)", 
    "attackData":{"hitFrame":"14", "faf":"43", "damage":"8.5"} 
}, 

{ 
    "attackName":"Up Tilt(1, Early)", 
    "attackData":{"hitFrame":"7", "faf":"27", "damage":"5"} 
}, 

{ 
    "attackName":"Up Tilt (1, Late)", 
    "attackData":{"hitFrame":"9", "faf":"27", "damage":"2"} 
}, 

{ 
    "attackName":"Up Tilt (2)", 
    "attackData":{"hitFrame":"11", "faf":"27", "damage":"6"} 
}, 

{ 
    "attackName":"Down Tilt (Weak)", 
    "attackData":{"hitFrame":"7", "faf":"26", "damage":"6"} 
}, 

{ 
    "attackName":"Down Tilt (Strong)", 
    "attackData":{"hitFrame":"7", "faf":"26", "damage":"7"} 
}, 

{ 
    "attackName":"Forward Smash (Weak)", 
    "attackData":{"hitFrame":"19", "faf":"68", "damage":"14"} 
}, 

{ 
    "attackName":"Forward Smash (Strong)", 
    "attackData":{"hitFrame":"19", "faf":"68", "damage":"16"} 
}, 

{ 
    "attackName":"Up Smash (Early)", 
    "attackData":{"hitFrame":"18", "faf":"65", "damage":"17"} 
}, 

{ 
    "attackName":"Up Smash (Mid)", 
    "attackData":{"hitFrame":"20", "faf":"65", "damage":"16"} 
}, 

{ 
    "attackName":"Up Smash (Late)", 
    "attackData":{"hitFrame":"22", "faf":"65", "damage":"15"} 
}, 

{ 
    "attackName":"Up Smash (Late)", 
    "attackData":{"hitFrame":"22", "faf":"65", "damage":"15"} 
}, 

{ 
    "attackName":"Down Smash (1)", 
    "attackData":{"hitFrame":"20", "faf":"69", "damage":"5"} 
}, 

{ 
    "attackName":"Down Smash (2, Early)", 
    "attackData":{"hitFrame":"25", "faf":"69", "damage":"16"} 
}, 

{ 
    "attackName":"Down Smash (2, Late)", 
    "attackData":{"hitFrame":"26", "faf":"69", "damage":"15"} 
} 
]} 

AJAX呼び出し現在選択されているオプションからカスタム属性を取得しようとするコード：

var selectedAttack = $("#attackList option:selected").data("value"); 
console.log(selectedAttack); 

JSONの実際の「attackData」コンテンツを戻すことができない理由を知りたい人は誰ですか？私は、カスタム属性に格納される前にJSONからattackData要素をログに記録するコードを追加しても、それはうまくいきます。しかし、私はそれを取得した後、[オブジェクトオブジェクト]は私が得るすべてです。

これを調べる時間がかかる人には、事前に感謝しています。

Answer 1

htmlオプションはプリミティブ値を文字列表現としてのみ取り入れることができます。 attr関数を使用してオプションを設定すると、値の文字列表現が使用されます。オブジェクトの場合は、実際にこの値を格納しているので、[object Object]に戻ります。

ただし、$.data関数を使用してデータをオブジェクトとして設定できます。トリックを行う必要があり、次のようにデータ値を設定する

$('<option></option>').data('value', value.attackData); 

または

私がHTMLを知っている限りで

'use strict'; 
 

 
var mock = [{ 
 
    name: 'Option 1', 
 
    value: { 
 
    identifier: 'option1', 
 
    value: { 
 
     hello: 'world' 
 
    } 
 
    } 
 
}, { 
 
    name: 'Option 2', 
 
    value: { 
 
    identifier: 'option2', 
 
    value: { 
 
     world: 'hello' 
 
    } 
 
    } 
 
}, { 
 
    name: 'Option 3', 
 
    value: { 
 
    identifier: 'option3', 
 
    value: { 
 
     sentence: 'hello world' 
 
    } 
 
    } 
 
}]; 
 

 
$(function() { 
 
    setTimeout(function(data) { 
 
    // fake postback 
 
    var targetElement = $('#dropdown'); 
 

 
    data.forEach(function(item) { 
 
     var option = $('<option></option>').data('value', item.value).text(item.name); 
 
     $(targetElement).append(option); 
 
    }); 
 

 
    }.bind(null, mock)); 
 

 
    $('#dropdown').on('change', function() { 
 
    var si = this.selectedIndex, 
 
     option = this.options[si], 
 
     name = option.text, 
 
     value = $.data(option, 'value'); 
 

 
    $('#output').html(name + '<br/>' + JSON.stringify(value)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="dropdown"> 
 
</select> 
 
<div id="output"> 
 
</div>