How to (re)create JSON records from HTML data attributes

Question

This might be something quite trivial, but I have very little experience in the field so it might as well turn out quite complicated.

Basically, I'm trying to render a bunch of HTML data attributes into their JSON equivalents. For example I have the following HTML markup (I've cut it since it's too long):

    <span class="play-queue play-queue-med-small" data-json=
        "{&quot;id&quot;:
         4276028,
         &quot;selected&quot;:
         false,&quot;type&quot;:
         &quot;track&quot;,&quot;sku&quot;:
         &quot;track-4276028&quot;,&quot;name&quot;:
         &quot;This Is What It Feels Like feat. Trevor   Guthrie&quot;,&quot;trackNumber&quot;:
        2,&quot;active&quot;:true,&quot;mixName&quot;:
        &quot;W&amp;
        W Remix&quot;,&quot;title&quot;:
        &quot;
        This Is What It Feels Like feat. Trevor Guthrie 
        (W&amp;W Remix)&quot;,&quot;slug&quot;:
        &quot
;this-is-what-it-feels-like-feat-trevor-guthrie-w-and-w-remix&quot;,
&quot;isrc&quot;:&quot;
    NLF711303293&quot;,&quot;releaseDate&quot;:
       &quot;2013-04-05&quot;,&quot;publishDate&quot;:&quot;2013-04-05&quot;,&quot;sampleUrl&quot;:&quot;

From this I want to render the data-json attribute into a JSON record looking like:

{
“key1”:”value1”,
“key2”:”value2”,
...
“keyN”:”valueN”
}

Is there any way to do this? Maybe a method (either in C# or in Java), or some workaround?

Thank you a million in advance!

Confused on what you need, are you looking for code to convert the `data-json` to real json on the server side? Or are you looking to take `data-json` and convert it to a js JSON object? — Nix, May 01 '13 at 15:28
@ Nix: Looking to take data-json and convert it to a js JSON object. — , May 01 '13 at 15:36
@mvillaev convert it into an object on the client or into a JSON string on the server? — Explosion Pills, May 01 '13 at 15:37

Nix · Accepted Answer · 2013-05-01T21:59:02.127

0

The client side solution would look like:

JSON.parse(unescape($('span.play-queue').data('json')))

The C# equivelent is the HttpUtility.HtmlDecode

edited May 01 '13 at 21:59

answered May 01 '13 at 15:40

Nix

57,072
29
149
198

@ Nix & Explosion Pills: My JavaScript is almost non-existent at present. I'll try to figure out what the same would look like in java or C#, and I'll let you know. Great thanks for the help! – May 01 '13 at 15:58
@ Nix & Explosion Pills: It turned out the main issue was to decode the markup, that is finding the opposite number of unescape() in C#. I found a method doing just that, here it is for reference: http://msdn.microsoft.com/en-us/library/7c5fyk1k.aspx Now remains only to parse the decoded string to JSON, but this looks rather trivial. Thank you both very much, yours was definitely a push in the right direction! – May 01 '13 at 19:14

How to (re)create JSON records from HTML data attributes

1 Answers1