Why is my jsonstring in my object undefined?

Question

I have the following object in my html-site:

 <a id="myID" class="list-group-item" href="#"
    title="Cateblalbla." name="Innovation Potential"
    islist="false" type="MetaDataEnum"
    items="[{"id":"Business Innovation","title":"Business Innovation","value":"Business Innovation"},{"id":"Business Differentiation","title":"Business Differentiation","value":"Business Differentiation"},{"id":"Business Standard","title":"Business Standard","value":"Business Standard"}]" stencilsetbindings="[{"order":3,"stencil":"ProcessCollapsed"},{"order":3,"stencil":"BPMNDiagram","namespace":"http://b3mn.org/stencilset/bpmn2.0#"},{"order":5,"stencil":"Task","namespace":"http://b3mn.org/stencilset/bpmn2.0#"}]" glossarybindings="[{"category":"21f8b13544364137aa5e67312fc3fe19","order":5},{"category":"dde0a325cbe84368881a1709384cb37a","order":6}]">

And when I do this:

console.log(document.id(myID).name)

The result is correct. But when doing it with .items or .glossaryBindings , I always get "undefined" why is this the case? I thought its a jsonstring.

EDIT: I create the whole object with javascript dynamically. The items attribute is crated with JSON.stringify(itemArray). So I am not sure how to pretend, that this returns me a jsonstring containing " " quotes instead of ' '.

Answer 1

There are two problems here:

1. You're using " within a " -quoted attribute. So naturally the value of the attribute stops as of the first " within it.

2. You're using an invalid HTML attribute. To use your own arbitrary attributes, use the data- prefix: data-items="..." (and data-stencilset and data-type and...).

To fix #1, you have at least two options:

• Remember that the content of an attribute in HTML is HTML text. So to use double-quotes within an attribute value, you can use " :

   data-json="{"foo&qout;:&qout;bar&qout;}"

  Of course, you also have to remember that < and & need to be < and & , too. (But you have to remember that anyway , or rely on the browser being tolerant, which it's required to be if it can figure it out.)

  Naturally, you automate that when generating the attribute. It's a simple matter of doing a replacement when writing it: & => & , < => < , and " => " (and again, you should be doing those first two anyway, because the attribute text is HTML regardless of what we're doing here).

• If your value will never have ' in it, you can use ' around the attribute value instead of " :

   data-json='{"foo":"bar"}'

Live Example:

 var attr = document.getElementById("myID").getAttribute("data-items"); var data = JSON.parse(attr); snippet.log("data[0].id = " + data[0].id);

 <a id="myID" class="list-group-item" href="#" title="Cateblalbla." name="Innovation Potential" islist="false" type="MetaDataEnum" data-items="[{&quot;id&quot;:&quot;Business Innovation&quot;,&quot;title&quot;:&quot;Business Innovation&quot;,&quot;value&quot;:&quot;Business Innovation&quot;},{&quot;id&quot;:&quot;Business Differentiation&quot;,&quot;title&quot;:&quot;Business Differentiation&quot;,&quot;value&quot;:&quot;Business Differentiation&quot;},{&quot;id&quot;:&quot;Business Standard&quot;,&quot;title&quot;:&quot;Business Standard&quot;,&quot;value&quot;:&quot;Business Standard&quot;}]"> <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Answer 2

You're getting undefined because items is not a valid attribute of the <a> element. You need to specify it as a data attribute like this:

data-items="{json string here}"

In Html5 this can be done this way:

console.log(document.id(myID).dataset.items);

If you're using jquery it can be done this way:

console.log($('#' + myID).data("items"));

Note: This answer assumes you've addressed the json/html attribute issue ( Best way to store JSON in an HTML attribute? )

Second note: Per a comment by @TJCrowder, the items attribute is accessible though not through the means used in the question. The proper method of getting a custom attribute is:

document.getElementById(myID).getAttribute("items")