Store JSON object in data attribute in HTML jQuery

Question

I am storing data using the data- approach in a HTML tag like so    lt td gt  lt  button class  delete  data-imagename    results i  name    gt Delete  lt  button gt  lt  td gt    I am then retrieving the data in a callback like this     this  data  imagename      That works fine  What I am stuck on is trying to save the object instead of just one of the properties of it  I tried to do this    lt td gt  lt button class  delete  data-image    results i     gt Delete lt  button gt  lt  td gt    Then I tried to access the name property like this   var imageObj     this  data  image    console log  Image name    imageObj name     The log tells me undefined  So it seems like I can store simple strings in the data- attributes but I can t store JSON objects     I ve also tried to use this kid of syntax with no luck    lt div data-foobar    foo   bar    gt  lt  div gt    Any idea on how to store an actual object in the HTML tag using the data- approach

User · Answer

There s a better way of storing JSON in the HTML  HTML  lt script id  quot some-data quot  type  quot application json quot  gt   quot param 1 quot    quot Value 1 quot    quot param 2 quot    quot Value 2 quot   lt  script gt   JavaScript JSON parse document getElementById  some-data   textContent

User · Answer

Using the documented jquery  data obj  syntax allows you to store an object on the DOM element  Inspecting the element will not show the data- attribute because there is no key specified for the value of the object  However  data within the object can be referenced by key with  data  foo   or the entire object can be returned with  data     So assuming you set up a loop and result i      name   image name           delete   i  data results i         gt   lt button class  delete  gt Delete lt  delete gt      delete   i  data  name         gt   image name      delete   i  data         gt    name   image name

User · Answer

This is how it worked for me   Object  var my object    Super Hero    Iron Man    Super Man       Set  Encode the stringified object with encodeURIComponent   and set as attribute     var data str   encodeURIComponent JSON stringify my object       div mydiv   attr  data-hero  data-str     Get  To get the value as an object  parse the decoded  with decodeURIComponent    attribute value     var data str      div mydiv   attr  data-hero    var my object   JSON parse decodeURIComponent data str

User · Answer

The trick for me was to add double quotes around keys and values  If you use a PHP function like json encode will give you a JSON encoded string and an idea how to properly encode yours    jQuery   elm-id   data  datakey   will return an object of the string  if the string is properly encoded as json   As per jQuery documentation   http   api jquery com jquery parsejson    Passing in a malformed JSON string results in a JavaScript exception being thrown  For example  the following are all invalid JSON strings      test  1    test does not have double quotes around it      test   1     test  is using single quotes instead of double quotes     test     test  is using single quotes instead of double quotes     1   a number must start with a digit   0 1  would be valid    undefined   undefined cannot be represented in a JSON string  null  however  can be    NaN   NaN cannot be represented in a JSON string  direct representation of Infinity is also n

User · Answer

Actually  your last example    lt div data-foobar    foo   bar    gt  lt  div gt    seems to be working well  see http   jsfiddle net GlauberRocha Q6kKU     The nice thing is that the string in the data- attribute is automatically converted to a JavaScript object  I don t see any drawback in this approach  on the contrary  One attribute is sufficient to store a whole set of data  ready to use in JavaScript through object properties    Note  for the data- attributes to be automatically given the type Object rather than String  you must be careful to write valid JSON  in particular to enclose the key names in double quotes

User · Answer

For the record  I found the following code works  It enables you to retrieve the array from the data tag  push a new element on  and store it back in the data tag in the correct JSON format  The same code can therefore be used again to add further elements to the array if desired  I found that     my-data-div   attr  data-namesarray   names string   correctly stores the array  but     my-data-div   data  namesarray   names string   doesn t work    lt div id  my-data-div  data-namesarray      gt  lt  div gt   var names array       my-data-div   data  namesarray    names array push  Baz Smith    var names string   JSON stringify names array       my-data-div   attr  data-namesarray   names string

User · Answer

A lot of problems with storing serialized data can be solved by converting the serialized string to base64     A base64 string can be accepted just about anywhere with no fuss    Take a look at    btoa        The WindowOrWorkerGlobalScope btoa   method creates a base-64 encoded   ASCII string from a String object in which each character in the   string is treated as a byte of binary data     atob        The WindowOrWorkerGlobalScope atob   function decodes a string of data   which has been encoded using base-64 encoding    Convert to from as needed

User · Answer

DOCTYPE html gt        lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt      btn1   click function     person   new Object    person name    vishal   person age  20         div   data person             btn2   click function         alert    div   data  name                 lt  script gt   lt body gt   lt button id  btn1  gt Attach data to div element lt  button gt  lt br gt   lt button id  btn2  gt Get data attached to div element lt  button gt   lt div gt  lt  div gt   lt  body gt     lt  html gt   Anser -Attach data to selected elements using an object with name value pairs  GET value using object propetis like name age etc

User · Answer

For me it work like that  as I need to store it in template        Generate HTML var gridHtml     lt div data-dataObj     JSON stringify dataObj  replace    g              gt  lt  div gt        Later var dataObj      div   data  dataObj       jQuery automatically unescape it

User · Answer

data   works perfectly for most cases  The only time I had a problem was when the JSON string itself had a single quote  I could not find any easy way to get past this so resorted to this approach  am using Coldfusion as server language         lt  DOCTYPE html gt           lt html gt               lt head gt                   lt title gt                      Special Chars in Data Attribute                  lt  title gt                   lt meta http-equiv  X-UA-Compatible  content  IE edge  gt                   lt script src  https   code jquery com jquery-1 12 2 min js  gt  lt  script gt                   lt script gt                        function                            var o        xxx                                                            1  get the data attribute as a string using attr                               2  unescape                             3  convert unescaped string back to object                             4  set the original data attribute to future calls get it as JSON                                                     o data  xxx  jQuery parseJSON unescape o attr  data-xxx                               console log o data  xxx        this is JSON object                                           lt  script gt                   lt title gt                      Title of the document                  lt  title gt               lt  head gt               lt body gt                   lt cfset str    name  o reilly s stuff  code 1  gt   lt  -- urlencode is a CF function to UTF8 the string  serializeJSON converts object to strin -- gt                   lt div id  xxx  data-xxx   urlencodedformat serializejson str     gt                   lt  div gt               lt  body gt           lt  html gt

User · Answer

instead of embedding it in the text just use     myElement   data  key  jsonObject    it won t actually be stored in the html  but if you re using jquery data  all that is abstracted anyway   To get the JSON back don t parse it  just call   var getBackMyJSON       myElement   data  key      If you are getting  Object Object  instead of direct JSON  just access your JSON by the data key   var getBackMyJSON       myElement   data  key   key

User · Answer

For some reason  the accepted answer worked for me only if being used once on the page  but in my case I was trying to save data on many elements on the page and the data was somehow lost on all except the first element   As an alternative  I ended up writing the data out to the dom and parsing it back in when needed  Perhaps it s less efficient  but worked well for my purpose because I m really prototyping data and not writing this for production    To save the data I used       myElement   attr  data-key   JSON stringify jsonObject      To then read the data back is the same as the accepted answer  namely   var getBackMyJSON       myElement   data  key      Doing it this way also made the data appear in the dom if I were to inspect the element with Chrome s debugger

User · Answer

Combine the use of window btoa and window atob together with JSON stringify and JSON parse   - This works for strings containing single quotes  Encoding the data   var encodedObject   window btoa JSON stringify dataObject      Decoding the data   var dataObject   JSON parse window atob encodedObject        Here is an example of how the data is constructed and decoded later with the click event   Construct the html and encode the data   var encodedObject   window btoa JSON stringify dataObject       lt td gt       lt a class  eventClass  href     data-topic      encodedObject      gt       Edit lt  a gt  lt  td gt     Decode the data in the click event handler       someElementID   on  click    eventClass   function e                event preventDefault                var encodedObject   e target attributes  data-topic   value              var dataObject   JSON parse window atob encodedObject                    use the dataObject  keyName

User · Answer

This code is working fine for me    Encode data with btoa  let data str   btoa JSON stringify jsonData        target id   attr  data-json   data str     And then decode it with atob  let tourData     this  data  json    tourData   atob tourData

[jquery] Store JSON object in data attribute in HTML jQuery

Examples related to jquery

Examples related to html

Examples related to json