I'm sure this is answered somewhere, but it is my lack of terminology knowledge that can't find where to look.
I am dynamically creating some Html as a result of some json data loaded from the server.
I am using createElement, and setAttribute to create the html and append it to the main body.
However, my dynamic html contains a "data-" attribute, which has further nested properties. An example end goal is such:
<li>
<span class=item data-item='{"width": 100, "height": 100,
"properties": { "Name": "foo", "Surname": "bar" }}'></span>
</li>
I have had some success when running:
li.setAttribute("data-item", '{"width": 100, "height": 100, "properties":
{ "Name": "foo", "Surname": "bar" }}');
But then when I come to use the data item elsewhere in my java-script, the attributes are recognized as a string as opposed to an object. When I hard code the HTML, the data-item is loaded correctly as an object. I have made the assumption it must be because I am incorrectly setting this attribute.