-1

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 ' '.

Chris Martin
  • 30,334
  • 10
  • 78
  • 137
progNewbie
  • 4,362
  • 9
  • 48
  • 107
  • 4
    That isn't valid HTML. Aside from the use of non-standard attributes, you're trying to use literal quote characters inside an attribute value delimited with literal quote characters. – Quentin Sep 10 '15 at 13:01
  • What are you trying to accomplish? – brso05 Sep 10 '15 at 13:02
  • @Quentin: Do you have an advice how to store an jsonstring in an non-standard attribute without making this 'quote' mistake? – progNewbie Sep 10 '15 at 13:03
  • @texNewbie again what are you trying to accomplish maybe there is a better way to do what you want. You can use `'` instead of `"`. – brso05 Sep 10 '15 at 13:05
  • @brso05 Problem is that it is dynamically created with JSON.parse(myArray). So how can I pretend getting " ? – progNewbie Sep 10 '15 at 13:08
  • just use single outer quotes for the attribute value and the doubles in the json will be fine – charlietfl Sep 10 '15 at 13:11
  • @charlietfl sadly I can't do that because I use: document.id('myouterDiv').grab(new Element('a'..... – progNewbie Sep 10 '15 at 13:14
  • if it's dynamically created don't set it as attribute....set it as property...problem in html will dissapear – charlietfl Sep 10 '15 at 13:16
  • @charlietfl: sry, how can I do this? – progNewbie Sep 10 '15 at 13:17
  • can use [Element.dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) but can also add arbitrary properties to an element object – charlietfl Sep 10 '15 at 13:19

2 Answers2

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 &quot;:

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

    Of course, you also have to remember that < and & need to be &lt; and &amp;, 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: & => &amp;, < => &lt;, and " => &quot; (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>
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • see my edit: I am not sure how to do your second approach because of the dynamically creating of the attribute – progNewbie Sep 10 '15 at 13:15
  • @texNewbie: What language is the attribute value filled in with? It's a simple matter of doing a replacement when writing it: `&` => `&`, `<` => `<`, and `"` => `"` (and again, you should be doing those first two anyway). – T.J. Crowder Sep 10 '15 at 13:20
  • @texNewbie: And you only have to do that if you're actually writing out HTML text (for instance, when generating an HTML response server-side). – T.J. Crowder Sep 10 '15 at 13:28
  • I still don't know how to change the quotes from my JSON.stringify(itemsArray), whose result I save in an new element which I create with .grab(newElement(...)) – progNewbie Sep 10 '15 at 13:30
-1

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 @T.J.Crowder, 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")
Community
  • 1
  • 1
Joel Etherton
  • 37,325
  • 10
  • 89
  • 104
  • That's not why the OP is having the problem they're having. While not valid and not a good idea, non-`data-*` arbitrary attributes do *work*. The quotes are the real problem. – T.J. Crowder Sep 10 '15 at 13:05
  • @T.J.Crowder: That looks like the making of an answer. You should post it as such. – Joel Etherton Sep 10 '15 at 13:06
  • @T.J.Crowder How can I fix the quotes problem, when creating the jsonstring with JSON.parse() ? – progNewbie Sep 10 '15 at 13:09
  • @T.J.Crowder: I was tempted to, however I just did a local test on a link using vanilla js, and items shows as undefined regardless. However, there is an alternate method. I'll update for that method. – Joel Etherton Sep 10 '15 at 13:13