Converting an HTML Attribute to Javascript Object

Question

I'm having trouble with converting an HTML-data attribute to a Javascript Object.

Here is what I do:

The Attribute looks like:

<a id="stringObj" data-string="{'Foo':'Bar'}">Some A-Tag</a>

In Javascript / JQuery I do as followed:

var obj = $("#stringObj").data('string').replace(/'/g,"\"");
obj = JSON.stringify(obj);
obj = JSON.parse(obj);

I of just used the JSON.stringify method for clean results, but it doesn't really matter. I also tried "eval" on the result but it keeps beeing a "string" on console.log(typeof obj) test.

How do I get an object from the attribute so I could use it like alert(obj.Foo);?

Your quotes are wrong. Check out my answer. You have to have a valid JSON... — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jun 25, 2018 at 11:41

Praveen Kumar Purushothaman · Accepted Answer · 2018-06-25 11:40:19Z

3

When you are using jQuery.data(), it will be returning it as an object by default, when you use valid JSON. If possible, please try to swap the " and '.

$(function() {
  var data = $("#stringObj").data("string");
  console.log(typeof data);
  console.log(data.Foo);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="stringObj" data-string='{"Foo": "Bar"}'>Some A-Tag</a>

If you can't change the HTML code for some reason (can't swap the ' and "), use the following snippet:

$(function() {
  var data = $("#stringObj").data("string").replace(/'/g, '"');
  data = JSON.parse(data);
  console.log(typeof data);
  console.log(data.Foo);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="stringObj" data-string="{'Foo': 'Bar'}">Some A-Tag</a>

answered Jun 25, 2018 at 11:40

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

Comments

Bhumi Shah · Accepted Answer · 2018-06-25 11:40:02Z

2

You can do it this way: https://codepen.io/creativedev/pen/NzBvYZ

var obj = $("#stringObj").data('string').replace(/'/g,"\"");
obj = JSON.parse(obj);
alert(obj.Foo);

answered Jun 25, 2018 at 11:40

Bhumi Shah

9,50210 gold badges69 silver badges110 bronze badges

1 Comment

Praveen Kumar Purushothaman Over a year ago

There's a better method... :) Swap the quotes... Look at my answer.

Damian Peralta · Accepted Answer · 2018-06-25 11:56:33Z

1

You can also do it without jQuery:

var stringAttr = document.getElementById("stringObj").dataset.string.replace(/'/g,"\"");
var myObj = JSON.parse(stringAttr);
console.log(myObj.Foo);

answered Jun 25, 2018 at 11:56

Damian Peralta

1,8969 silver badges12 bronze badges

Comments

Mike · Accepted Answer · 2018-06-25 11:53:27Z

0

I just deleted the JSON.stringify and it worked for now. Of course I tested it a several times before with no success but it does work for some reason :D - thank you guys.

answered Jun 25, 2018 at 11:53

Mike

5525 silver badges15 bronze badges

Collectives™ on Stack Overflow

Converting an HTML Attribute to Javascript Object

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related