JSON object in data attribute [duplicate]

Question

Can we somehow write a JSON string in html data tag attribute?

Then process it in javascript to parse as a normal JSON object.

Example:

HTML

<select class="field" data-select="{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}"></select>

JS

var obj = JSON.parse($('form').find('select').attr('data-select'));

Solution using single quotes:

<select class="field" data-select='{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}'></select>

Christian Benseler · Accepted Answer · 2016-02-25 18:03:39Z

4

Use JSON.stringify (if javascript) to make the json a string and sotre it in the data-* field.

var json = {"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]};
var div = document.getElementById("myDiv");
div.setAttribute("data-json", JSON.stringify(json));
alert(div.getAttribute("data-json"))

Check the template engine docs (if you are you are using one) to generate the stringified json.

Fiddle: https://jsfiddle.net/b1tqxhty/

answered Feb 25, 2016 at 18:03

Christian Benseler

8,0839 gold badges42 silver badges73 bronze badges

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

1 Comment

Vitalij Over a year ago

Was needed only single quotes in wrapping string of "data-select" attribute.

Collectives™ on Stack Overflow

JSON object in data attribute [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related