How to dynamically construct html tag attriburtes with json data?

Question

I am having (Strigified) json data in a variable called test. I am constructing html elements dynamically and also I want json data to be inserted in an element attribute.

var templateHtml = "":
    $.each(loopValues, function(Key, Value) { // Loops which constructs dynamic data
        var test = '{"type": "page"}';  // this is the json data which need to be appended as data-all attribute value.
        templateHtml = templateHtml.concat("<a data-all="+ test +" href='javascript:;' class='icon' id='TestTt'></a>");
    }
$("#sortable1").html(templateHtml);

After executing these lines, when I see the constructed element, It is totally scrambled. How to get a well formatted json data in a element attribute ?

enter image description here

I do not want to append json data on attribute using jquery after constructing html. I want this functionality at html construction time.

I refered http://gabrieleromanato.name/jquery-binding-animation-data-to-elements-with-json/ http://api.jquery.com/jQuery.parseJSON/

Any Idea ?

you missed the ); to close the $.each

TecHunter
– TecHunter

2013-06-11 11:46:17 +00:00
Commented Jun 11, 2013 at 11:46 — TecHunter
– TecHunter, Commented Jun 11, 2013 at 11:46

TecHunter · Accepted Answer · 2013-06-11 11:55:32Z

First, your code miss some syntax element :

var templateHtml = ""; // use ; not :
$.each(loopValues, function (Key, Value) { // Loops which constructs dynamic data
    var test = '"{type": "page"}'; // this is the json data which need to be appended as data-all attribute value.
    templateHtml = templateHtml.concat("<a data-all=" + test + " href='javascript:;' class='icon' id='TestTt'></a>");
}); //close the loop call

Then you need to add single quotes around your test variable when you append it. I suggest you choose where to use single quotes or doubles and stick to the choice permanently. I personnally use double quotes in HTML and single quotes in JS :

var templateHtml = '';
$.each(loopValues, function (Key, Value) { // Loops which constructs dynamic data
    var test = "{type: 'page'}"; // this is the json data which need to be appended as data-all attribute value.
    //since its JSON i use single quote inside but double outside.
    templateHtml = templateHtml.concat('<a data-all="' + test + '" href="javascript:;" class="icon" id="TestTt"></a>');
});

FIDDLE here

NLZ · Accepted Answer · 2013-06-11 11:35:42Z

1

What you need is creating elements with jQuery with json as parameters.

For example creating a simple table

var $table = new $('<table>', { 'cellpadding' : '5', 'cellspacing' : '4' });
var $tr = new $('<tr>');
var $td = new $('<td>', { 'class' : 'test' });
$td.text('cell contents');
$tr.append($td);
$table.append($tr);

$('body').append($table);

answered Jun 11, 2013 at 11:35

NLZ

9456 silver badges12 bronze badges

Comments

antyrat · Accepted Answer · 2013-06-11 11:47:43Z

1

You can keep your json in DOM without data- attribute, just use:

$("#sortable1").html("<a href='javascript:;' class='icon' id='TestTt'></a>");
$( "#sortable1 > a" ).data( 'all', test );

According to jQuery .data() API. Data value can be any JavaScript type.

To get this JSON you will need just to write:

console.log( $( "#sortable1 > a" ).data( 'all' ) );

UPDATE:

But better is to add data at creation proccess:

$.each(loopValues, function(Key, Value) { // Loops which constructs dynamic data
    $( "#sortable1" ).append( $( "<a/>" ).addClass( "icon" ).data( "all", {"type": "page"} ).attr( "id", "TestTt" ) );
});

edited Jun 11, 2013 at 11:47

answered Jun 11, 2013 at 11:33

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

1 Comment

Muthu Over a year ago

I am another query? After loop is executed all the contents are added to html. I want to construct the attribute with json at the html (templateHtml) construction time.

Collectives™ on Stack Overflow

How to dynamically construct html tag attriburtes with json data?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related