jQuery數據未解析值html5數據自定義屬性

Question

我有后端生成的以下HTML標簽

<select name="brand" class="form-control">
    <option value="1" data-info="[{id=1, name=detail#1}, {id=2, name=detail#2}, {id=3, name=detail#3}]">brand#1</option>
    <option value="2" data-info="[{id=3, name=detail#3}, {id=4, name=detail#4}, {id=5, name=detail#5}]">brand#2</option>
</select>

我試圖在用戶更改選項時訪問數據信息值，所以我嘗試了這段代碼

$('#brand').on('change', function(){
    var optionSelected = $("option:selected", this);
    var info = optionSelected.data("info")

    console.log(typeof info)
})

但是當我得到typeof信息時，我得到一個字符串，並且我需要和對象。

如果我嘗試JSON.parse（info）， 則會在JSON數據的第1行第3列中收到SyntaxError：JSON.parse：預期的屬性名稱或'}'

我了解此錯誤可能是由於兩個原因導致信息已經解析或它是無效的json。

任何幫助表示贊賞

Answer 1

jQuery的JSON處理程序僅轉換有效的JSON。 您所擁有的JSON無效。 具體來說，它缺少必要的引號，而您使用的是=而不是: 。 它應顯示為：

<option value="1" data-info='[{"id":1, "name":"detail#1"}, {"id":2, "name":"detail#2"}, {"id":3, "name":"detail#3"}]'>brand#1</option>

供參考， JSON規范 。