Получить значение ключа из массива атрибутов HTML javascript

Question

Это атрибут HTML:

data-plugin-options="{'Enabled': true, 'StartAt': 30, 'EndAt': 65}"

Как получить значение ключей по javascript по имени ключа?Например, значение «StartAt».

Answer 1

Пожалуйста, смотрите ниже код.мы знаем, что singleQuote выдаст ошибку при анализе JSON.поэтому я заменяю его на doubleQuote.

$(document).ready(function(){
var d=$("#data").attr('data-plugin-options');
d=d.replace(/'/g, '"');
var parsedData=JSON.parse(d);
console.log(parsedData.StartAt);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id='data' data-plugin-options="{'Enabled': true, 'StartAt': 30, 'EndAt': 65}">Some text...</p>

Answer 2

Данные в элементе всегда являются строкой, но вы можете проанализировать их без проблем.

Вот пример, как это сделать

const myElement = document.querySelector('p') // here you have element object, you can use other ways to get it
const dataString = myElement.dataset.pluginOptions // here you have string of the data
const formattedDataString = dataString.replace(/'/g, '"') // your JSON is wrongly formatted, this is fix
const dataObject = JSON.parse(formattedDataString) // where you have object of the data
const dataValue = dataObject.Enabled // where you have value by key

Ваш JSON также неверно отформатирован,он имеет одинарные кавычки, где спецификация JSON требует двойных кавычек.Вы можете заменить его, но это может привести к дополнительным проблемам в случае, если содержимое содержит двойные кавычки - это приведет к сбою вашего сценария.Я бы посоветовал взглянуть на генерацию JSON и изменить ее на стандартную, если это возможно.

Надеюсь, это поможет