CODEWITHSUNDEEP
javascriptjqueryhtml
Elad Lachmi
Elad Lachmi

Reputation: 10561

Parse json attribute

In an intranet app I have HTML elements with custom tags. There are several types of tags, data-mem is one example. In the markup it looks like this: 

<a href="something.html" data-mem='{varname: "value", varname2: "value"}'>Bla Bla</a>

What I want to do is get the json attribute and use the name/value pairs in a JS method call. Note: both names and values are unknown and dynamic and I'm using jquery.

RegEvent('varname','values','varname2','value');

What I have done up till now is get the list of all tags containing a data-mem attribute:

var objs = $('a[data-mem]');

I'm a little lost now. Don't really know how to continue. Any suggestions?

Thank you!

Upvotes: 4

Views: 3676

Answers (4)

GregL
GregL

Reputation: 38103

You can use eval() to convert the JSON string into an actual JS object.

However, from my test, it appears you will need to make sure that the property names are quoted (i.e. "varname": "value" instead of varname: "value").

And as @Pointy said, you can then just use the jQuery .data() method to retrieve the string.

So your HTML is like this:

<a href="something.html" data-mem='{"varname": "value", "varname2": "value"}'>Bla Bla</a>

And your Javascript becomes:

var data = eval($('a').data('mem'));
// build up an array of properties and values
var prop, valueArray = [], propArray = [];
// iterate over the properties in the object
for (prop in data) {
    // make sure it hasn't come from the prototype chain
    if (data.hasOwnProperty(prop)) {
        propArray.push(prop.toString());
        valueArray.push(data[prop]);
    }
}
// now, assuming your function always takes 4 parameters, you can just return the first two pairs of properties and values:
RegEvent(propArray[0], valueArray[0], propArray[1], valueArray[1]);

The above example shows how you can use the reflection capabilities of javascript to cater for any property names.

EDIT: Updated code to show how to handle any property names.

Upvotes: 1

Brian Nickel
Brian Nickel

Reputation: 27550

The extraction part of your problem has been answered well by a few people. It looks like you are also trying to get an arbitrary conversion from {a:1, b: 2} to RegEvent('a', 1, 'b', 2).

To do that, you just need to loop through the arguments of the stored JSON and build an argument array. Once complete, you can RegEvent.apply to pass those arguments to the function.

$('a[data-mem]').each(function(){
    var data = $(this).data('mem'),
        args = [];

    $.each(data, function(name, value) {
        args.push(name);
        args.push(value);
    });

    RegEvent.apply(null, args);
});

Upvotes: 3

Pointy
Pointy

Reputation: 413702

The jQuery ".data()" method does it automatically.

var data = $('#yourId').data('mem');

Then "data.varname" will be "value", etc.

edit — given your HTML, since you have not given a class or "id" to your <a> tag, I guess you could do:

var data = $('a[data-mem]').data('mem');

It might be better to find a good way to single out the element in question. It depends on the rest of the code of course.

edit again — also the JSON has to be valid - property names must be quoted.

Upvotes: 6

Rafay
Rafay

Reputation: 31033

as @GregL said you have to quote the key to make it a valid JSON and you can pass the function your json and process it inside the function as the key and values are dynamic

var data = $("a").data("mem");
RegEvent(data);

and inside the function you can loop through the json like

$.each(data,function(key,value){
       console.log(key);
console.log(value);
       });

http://jsfiddle.net/nu3kz/3/

Upvotes: 2

Related Questions