This String to JSON using javascript or jQuery

Question

I'm writing a javascript animation script and I want people to be able to specify behaviour declaratively in the HTML.

This is what I want my HTML to look like:

<div data-animation="top: 600, left: 600, opacity: 1, start: 0.2, finish: 0.8"></div>

This obviously isn't valid JSON, but you can't write valid JSON in HTML. Is there a way to turn this into JSON?

I want to be able to get the attribute value and turn it straight into a javascript object that I can use without having to manually parse the string. I.e. I want this:

var example = {
    top: 600,
    left: 600,
    opacity: 1,
    start: 0.2,
    finish: 0.8
};

did you try `data-animation="{top: 600, left: 600, opacity: 1, start: 0.2, finish: 0.8}" ` — Vikram, Jun 01 '15 at 14:31

Glorfindel · Answer 1 · 2015-06-01T14:26:45.027

1

You can, using JSON.parse():

$('div[data-animation]').each(function() {
    var json = JSON.parse($(this).attr('data-animation'));
});

See this fiddle.

edited Jun 01 '15 at 14:26

answered Jun 01 '15 at 14:16

Glorfindel

21,988
13
81
109

This is the simplest and best answer. `JSON.parse()` provides the exact functionality the OP requested. – Vince Jun 01 '15 at 15:35
This doesn't fulfil the exact functionality because it requires the use to single quotes for the HTML and then valid JSON written into the attribute. This is different to the HTML posted in the original question, part of the problem being that it isn't in a format that JSON.parse will handle. – Jon Jun 01 '15 at 18:50

score 1 · Accepted Answer · answered Jun 01 '15 at 14:22

1

A more manual approch :

function getParametters(divId)
{
    var retObj = {}
    jQuery.each($("#" + divId).attr("data-animation").split(","),
    function(index, value){
        var spliced = value.split(":");
        retObj[spliced[0].trim()] = spliced[1].trim();
    });
    return retObj;
}

answered Jun 01 '15 at 14:22

Remy Grandin

1,638
1
14
34

I was trying to avoid manual parsing but having seen the alternatives I accept that this is the best solution. – Jon Jun 01 '15 at 14:51

score 1 · Answer 3 · answered Jun 01 '15 at 14:22

1

You could use eval().

The eval() method evaluates JavaScript code represented as a string.

See the following

var animationString = $('div').data('animation');
eval('({' + animationString + '})');

Run this in your console to see how it works:

eval('({top: 600, left: 600, opacity: 1, start: 0.2, finish: 0.8})');

The above code returns the following Object:

Object {top: 600, left: 600, opacity: 1, start: 0.2, finish: 0.8}

Hope that helps

answered Jun 01 '15 at 14:22

Jako Basson

1,461
12
19

Nicely done. Do you mind explaining why you gotta put parentheses inside the string? – brroshan Jun 01 '15 at 14:49
Read this http://stackoverflow.com/questions/197769/when-is-javascripts-eval-not-evil . Code injection should not be a problem in your case and the performance hit you might take should be very minimal and hardly noticeable, but ultimately its up to you whether you use it or not. – Jako Basson Jun 01 '15 at 14:56
1

Agreed, your link makes some good arguments. However, this code might be used by other developers and I don't want to give the impression that eval is generally okay to use. – Jon Jun 01 '15 at 18:54
No worries, would have chosen the other solution myself. Cheers – Jako Basson Jun 02 '15 at 07:04

score 0 · Answer 4 · answered Jun 01 '15 at 14:16

0

Try this:

$(function(){
   var a = $("div").data("animation");
   var b = JSON.stringify(a);
   var obj = JSON.parse(b);

   console.log(obj);
});

answered Jun 01 '15 at 14:16

brroshan

1,640
17
19

your answer is too close. – Sudharsan S Jun 01 '15 at 14:23

score 0 · Answer 5 · answered Jun 01 '15 at 14:18

0

You can add a class or id to the div and access the attribute value and store in to a object like below.

var animation=$('.classname').attr('data-animation');

answered Jun 01 '15 at 14:18

Rakesh Sajja

148
9

This String to JSON using javascript or jQuery

5 Answers5