Parse json attribute

Question

In an intranet application, I have HTML elements with custom tags. There are several types of tags, one example is mem-mem-mem. 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 name / value pairs in the JS method call. Note: both names and values ​​are unknown and dynamic, and I use jquery.

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

What I have done so far is to get a list of all tags containing the data-mem attribute:

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

Now I'm a little lost. I don’t know how to proceed. Any suggestions?

Thanks!

Answer 1

Several people answered the part of extracting your problem. 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 this, you just need to iterate over the stored JSON arguments and build an array of arguments. Upon completion, you can RegEvent.apply pass these 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); }); 

Answer 2

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

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

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

edit - given your HTML, since you did not assign your class or "id" to the <a> tag, I think you could do:

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

It might be better to find a good way to highlight the item in question. It depends on the rest of the code, of course.

change again - also JSON must be valid - property names must be specified.

Answer 3

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

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

and inside the function you can scroll json like

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

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

Answer 4

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

However, from my test , you need to make sure that the property names are specified (ie "varname": "value" instead of varname: "value" ).

And as @Pointy said, you can simply use the jQuery .data() method to extract the string.

So your HTML code is as follows:

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

And your Javascript will become:

 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 javascript features to reflect any property names.

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