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
– Vikram, Commented Jun 1, 2015 at 14:31

Remy Grandin · Accepted Answer · 2015-06-01 14:22:17Z

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 1, 2015 at 14:22

Remy Grandin

1,5961 gold badge14 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jon Over a year ago

I was trying to avoid manual parsing but having seen the alternatives I accept that this is the best solution.

Jako Basson · Accepted Answer · 2015-06-01 14:22:24Z

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 1, 2015 at 14:22

Jako Basson

1,54113 silver badges21 bronze badges

4 Comments

brroshan Over a year ago

Nicely done. Do you mind explaining why you gotta put parentheses inside the string?

Jako Basson Over a year ago

Read this stackoverflow.com/questions/197769/… . 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.

Jon Over a year ago

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.

Jako Basson Over a year ago

No worries, would have chosen the other solution myself. Cheers

Glorfindel · Accepted Answer · 2015-06-01 14:26:45Z

1

You can, using JSON.parse():

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

See this fiddle.

edited Jun 1, 2015 at 14:26

answered Jun 1, 2015 at 14:16

Glorfindel

22.8k13 gold badges97 silver badges124 bronze badges

2 Comments

Vince Over a year ago

This is the simplest and best answer. JSON.parse() provides the exact functionality the OP requested.

Jon Over a year ago

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.

brroshan · Accepted Answer · 2015-06-01 14:16:45Z

0

Try this:

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

   console.log(obj);
});

answered Jun 1, 2015 at 14:16

brroshan

1,65017 silver badges19 bronze badges

1 Comment

Sudharsan S Over a year ago

your answer is too close.

Rakesh Sajja · Accepted Answer · 2015-06-01 14:18:17Z

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 1, 2015 at 14:18

Rakesh Sajja

1489 bronze badges

Collectives™ on Stack Overflow

This String to JSON using javascript or jQuery

5 Answers 5

1 Comment

4 Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related