Почему данные обрезаются в наборе данных?

Question

Почему данные обрезаются в наборе данных? HTML

<div id="osName" data-osname = <%= system.os %>></div> //system.os ="["Windows10","Windows7","LINUX7","MAC OS13"]" - JSON

JS

let osname = JSON.parse(document.getElementById('osName').dataset.osname); //syntaxerror unexpected end of json

Потому что

console.log(document.getElementById('osName').dataset.osname); //"["Windows10","Windows7","LINUX7","MAC

Как это исправить?

Answer 1

Почему? потому что вы не добавляете кавычки вокруг атрибута, и он разбивается на пробел

<div id="osName" data-osname='<%= system.os %>'</div>

console.log("without", document.querySelector("#test1").dataset.foo)
console.log("with", document.querySelector("#test2").dataset.foo)

<div id="test1" data-foo=["asdf","foo bar"]></div>
<div id="test2" data-foo='["asdf","foo bar"]'></div>