Using stringify on JSON object to use in HTML data attribute
up vote
0
down vote
favorite
I've been looking through the various on posts on stringify but I have been unable to find a solution to my problem.
I'm trying to stringify a JSON object and insert it into the data attribute of a new element in the DOM.
In the example below, if the element is inspected using Chrome and then edit HTML is selected, the output looks like the following:
<div class="ui-menu-item" data-menu-item="{" title":"this="" is="" a="" test="" for="" "="" and="" '.="" it="" fails.","url":"some="" url"}"="" id="test">This element contains the data.</div>
The required result should look like the following I think:
<div class="ui-menu-item" data-menu-item="{"title":"this is a test for " and ' it fails.","url":"some url"}" id="test">This element contains the data.</div>
Note: I know I can use jQuery's data method instead but choosing not to.
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.log (data);
$(document).ready(function() {
var tpl = "<div class="ui-menu-item" data-menu-item="" + data + "" id="test">This element contains the data.</div>";
$('body').append(tpl);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
javascript json encoding stringify
|
show 3 more comments
up vote
0
down vote
favorite
I've been looking through the various on posts on stringify but I have been unable to find a solution to my problem.
I'm trying to stringify a JSON object and insert it into the data attribute of a new element in the DOM.
In the example below, if the element is inspected using Chrome and then edit HTML is selected, the output looks like the following:
<div class="ui-menu-item" data-menu-item="{" title":"this="" is="" a="" test="" for="" "="" and="" '.="" it="" fails.","url":"some="" url"}"="" id="test">This element contains the data.</div>
The required result should look like the following I think:
<div class="ui-menu-item" data-menu-item="{"title":"this is a test for " and ' it fails.","url":"some url"}" id="test">This element contains the data.</div>
Note: I know I can use jQuery's data method instead but choosing not to.
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.log (data);
$(document).ready(function() {
var tpl = "<div class="ui-menu-item" data-menu-item="" + data + "" id="test">This element contains the data.</div>";
$('body').append(tpl);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
javascript json encoding stringify
hi Asa, have you try jQuery.data()? it work perfectly for this situations. if you have jquery, use it.link
– Neo Anderson
Nov 11 at 14:19
@NeoAnderson hi, As I mentioned in the post, I'm aware of it but I'd prefer to keep it in the attribute. The attributes are there on existing elements created server side and I just want to keep everything consistent.
– Asa Carter
Nov 11 at 14:22
2
You could create the<div>
and then usesetAttribute()
to set the value to the JSON string.
– Pointy
Nov 11 at 14:25
It seems that you might need to write your own string.replace formula to get rid of the double quotes or other special characters. Is the expectation that you would also be pulling down that JSON again and parsing it for later use in your application?
– Ben Steward
Nov 11 at 14:26
if you Insist that dont use .data() . what about use encodeURI and decodeURI. , as one prepare-like function for this problem. you can do this : encodeURI(JSON.stringify(data))
– Neo Anderson
Nov 11 at 14:33
|
show 3 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I've been looking through the various on posts on stringify but I have been unable to find a solution to my problem.
I'm trying to stringify a JSON object and insert it into the data attribute of a new element in the DOM.
In the example below, if the element is inspected using Chrome and then edit HTML is selected, the output looks like the following:
<div class="ui-menu-item" data-menu-item="{" title":"this="" is="" a="" test="" for="" "="" and="" '.="" it="" fails.","url":"some="" url"}"="" id="test">This element contains the data.</div>
The required result should look like the following I think:
<div class="ui-menu-item" data-menu-item="{"title":"this is a test for " and ' it fails.","url":"some url"}" id="test">This element contains the data.</div>
Note: I know I can use jQuery's data method instead but choosing not to.
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.log (data);
$(document).ready(function() {
var tpl = "<div class="ui-menu-item" data-menu-item="" + data + "" id="test">This element contains the data.</div>";
$('body').append(tpl);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
javascript json encoding stringify
I've been looking through the various on posts on stringify but I have been unable to find a solution to my problem.
I'm trying to stringify a JSON object and insert it into the data attribute of a new element in the DOM.
In the example below, if the element is inspected using Chrome and then edit HTML is selected, the output looks like the following:
<div class="ui-menu-item" data-menu-item="{" title":"this="" is="" a="" test="" for="" "="" and="" '.="" it="" fails.","url":"some="" url"}"="" id="test">This element contains the data.</div>
The required result should look like the following I think:
<div class="ui-menu-item" data-menu-item="{"title":"this is a test for " and ' it fails.","url":"some url"}" id="test">This element contains the data.</div>
Note: I know I can use jQuery's data method instead but choosing not to.
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.log (data);
$(document).ready(function() {
var tpl = "<div class="ui-menu-item" data-menu-item="" + data + "" id="test">This element contains the data.</div>";
$('body').append(tpl);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.log (data);
$(document).ready(function() {
var tpl = "<div class="ui-menu-item" data-menu-item="" + data + "" id="test">This element contains the data.</div>";
$('body').append(tpl);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.log (data);
$(document).ready(function() {
var tpl = "<div class="ui-menu-item" data-menu-item="" + data + "" id="test">This element contains the data.</div>";
$('body').append(tpl);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
javascript json encoding stringify
javascript json encoding stringify
asked Nov 11 at 14:16
Asa Carter
1,00831543
1,00831543
hi Asa, have you try jQuery.data()? it work perfectly for this situations. if you have jquery, use it.link
– Neo Anderson
Nov 11 at 14:19
@NeoAnderson hi, As I mentioned in the post, I'm aware of it but I'd prefer to keep it in the attribute. The attributes are there on existing elements created server side and I just want to keep everything consistent.
– Asa Carter
Nov 11 at 14:22
2
You could create the<div>
and then usesetAttribute()
to set the value to the JSON string.
– Pointy
Nov 11 at 14:25
It seems that you might need to write your own string.replace formula to get rid of the double quotes or other special characters. Is the expectation that you would also be pulling down that JSON again and parsing it for later use in your application?
– Ben Steward
Nov 11 at 14:26
if you Insist that dont use .data() . what about use encodeURI and decodeURI. , as one prepare-like function for this problem. you can do this : encodeURI(JSON.stringify(data))
– Neo Anderson
Nov 11 at 14:33
|
show 3 more comments
hi Asa, have you try jQuery.data()? it work perfectly for this situations. if you have jquery, use it.link
– Neo Anderson
Nov 11 at 14:19
@NeoAnderson hi, As I mentioned in the post, I'm aware of it but I'd prefer to keep it in the attribute. The attributes are there on existing elements created server side and I just want to keep everything consistent.
– Asa Carter
Nov 11 at 14:22
2
You could create the<div>
and then usesetAttribute()
to set the value to the JSON string.
– Pointy
Nov 11 at 14:25
It seems that you might need to write your own string.replace formula to get rid of the double quotes or other special characters. Is the expectation that you would also be pulling down that JSON again and parsing it for later use in your application?
– Ben Steward
Nov 11 at 14:26
if you Insist that dont use .data() . what about use encodeURI and decodeURI. , as one prepare-like function for this problem. you can do this : encodeURI(JSON.stringify(data))
– Neo Anderson
Nov 11 at 14:33
hi Asa, have you try jQuery.data()? it work perfectly for this situations. if you have jquery, use it.link
– Neo Anderson
Nov 11 at 14:19
hi Asa, have you try jQuery.data()? it work perfectly for this situations. if you have jquery, use it.link
– Neo Anderson
Nov 11 at 14:19
@NeoAnderson hi, As I mentioned in the post, I'm aware of it but I'd prefer to keep it in the attribute. The attributes are there on existing elements created server side and I just want to keep everything consistent.
– Asa Carter
Nov 11 at 14:22
@NeoAnderson hi, As I mentioned in the post, I'm aware of it but I'd prefer to keep it in the attribute. The attributes are there on existing elements created server side and I just want to keep everything consistent.
– Asa Carter
Nov 11 at 14:22
2
2
You could create the
<div>
and then use setAttribute()
to set the value to the JSON string.– Pointy
Nov 11 at 14:25
You could create the
<div>
and then use setAttribute()
to set the value to the JSON string.– Pointy
Nov 11 at 14:25
It seems that you might need to write your own string.replace formula to get rid of the double quotes or other special characters. Is the expectation that you would also be pulling down that JSON again and parsing it for later use in your application?
– Ben Steward
Nov 11 at 14:26
It seems that you might need to write your own string.replace formula to get rid of the double quotes or other special characters. Is the expectation that you would also be pulling down that JSON again and parsing it for later use in your application?
– Ben Steward
Nov 11 at 14:26
if you Insist that dont use .data() . what about use encodeURI and decodeURI. , as one prepare-like function for this problem. you can do this : encodeURI(JSON.stringify(data))
– Neo Anderson
Nov 11 at 14:33
if you Insist that dont use .data() . what about use encodeURI and decodeURI. , as one prepare-like function for this problem. you can do this : encodeURI(JSON.stringify(data))
– Neo Anderson
Nov 11 at 14:33
|
show 3 more comments
2 Answers
2
active
oldest
votes
up vote
2
down vote
accepted
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.log (data);
$(document).ready(function() {
var tpl = "<div class="ui-menu-item" id="test">This element contains the data.</div>";
$('body').append(tpl);
$('#test').attr('data-menu-item', data)
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
add a comment |
up vote
0
down vote
Consider inserting a jQuery object instead of doing all that string escaping work and use data()
method to pass your object to the element
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
var tpl = $('<div>', {class: "ui-menu-item",id: "test"})
.text("This element contains the data")
.data(data);
$('body').append(tpl);
console.log($('#test').data('title'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm a big fan of.data()
but it should be noted that it won't actually set the attribute on the DOM node.
– Pointy
Nov 11 at 14:33
@Pointy found a surprising issue with it also where when used to set in a parent doc you couldn't access it from within an iframe using the iframe version of jQuery global. I always assumed it used Element.dataset in more recent versions but turns out it doesn't. Had to dowindow .parent.$(selector).data()
to get it
– charlietfl
Nov 11 at 14:38
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.log (data);
$(document).ready(function() {
var tpl = "<div class="ui-menu-item" id="test">This element contains the data.</div>";
$('body').append(tpl);
$('#test').attr('data-menu-item', data)
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
add a comment |
up vote
2
down vote
accepted
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.log (data);
$(document).ready(function() {
var tpl = "<div class="ui-menu-item" id="test">This element contains the data.</div>";
$('body').append(tpl);
$('#test').attr('data-menu-item', data)
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.log (data);
$(document).ready(function() {
var tpl = "<div class="ui-menu-item" id="test">This element contains the data.</div>";
$('body').append(tpl);
$('#test').attr('data-menu-item', data)
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.log (data);
$(document).ready(function() {
var tpl = "<div class="ui-menu-item" id="test">This element contains the data.</div>";
$('body').append(tpl);
$('#test').attr('data-menu-item', data)
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.log (data);
$(document).ready(function() {
var tpl = "<div class="ui-menu-item" id="test">This element contains the data.</div>";
$('body').append(tpl);
$('#test').attr('data-menu-item', data)
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.log (data);
$(document).ready(function() {
var tpl = "<div class="ui-menu-item" id="test">This element contains the data.</div>";
$('body').append(tpl);
$('#test').attr('data-menu-item', data)
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
answered Nov 11 at 14:40
kj_
33916
33916
add a comment |
add a comment |
up vote
0
down vote
Consider inserting a jQuery object instead of doing all that string escaping work and use data()
method to pass your object to the element
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
var tpl = $('<div>', {class: "ui-menu-item",id: "test"})
.text("This element contains the data")
.data(data);
$('body').append(tpl);
console.log($('#test').data('title'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm a big fan of.data()
but it should be noted that it won't actually set the attribute on the DOM node.
– Pointy
Nov 11 at 14:33
@Pointy found a surprising issue with it also where when used to set in a parent doc you couldn't access it from within an iframe using the iframe version of jQuery global. I always assumed it used Element.dataset in more recent versions but turns out it doesn't. Had to dowindow .parent.$(selector).data()
to get it
– charlietfl
Nov 11 at 14:38
add a comment |
up vote
0
down vote
Consider inserting a jQuery object instead of doing all that string escaping work and use data()
method to pass your object to the element
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
var tpl = $('<div>', {class: "ui-menu-item",id: "test"})
.text("This element contains the data")
.data(data);
$('body').append(tpl);
console.log($('#test').data('title'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm a big fan of.data()
but it should be noted that it won't actually set the attribute on the DOM node.
– Pointy
Nov 11 at 14:33
@Pointy found a surprising issue with it also where when used to set in a parent doc you couldn't access it from within an iframe using the iframe version of jQuery global. I always assumed it used Element.dataset in more recent versions but turns out it doesn't. Had to dowindow .parent.$(selector).data()
to get it
– charlietfl
Nov 11 at 14:38
add a comment |
up vote
0
down vote
up vote
0
down vote
Consider inserting a jQuery object instead of doing all that string escaping work and use data()
method to pass your object to the element
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
var tpl = $('<div>', {class: "ui-menu-item",id: "test"})
.text("This element contains the data")
.data(data);
$('body').append(tpl);
console.log($('#test').data('title'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Consider inserting a jQuery object instead of doing all that string escaping work and use data()
method to pass your object to the element
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
var tpl = $('<div>', {class: "ui-menu-item",id: "test"})
.text("This element contains the data")
.data(data);
$('body').append(tpl);
console.log($('#test').data('title'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
var tpl = $('<div>', {class: "ui-menu-item",id: "test"})
.text("This element contains the data")
.data(data);
$('body').append(tpl);
console.log($('#test').data('title'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
var data = {
title: 'This is a test for " and '. It fails.',
url: 'Some url'
};
var tpl = $('<div>', {class: "ui-menu-item",id: "test"})
.text("This element contains the data")
.data(data);
$('body').append(tpl);
console.log($('#test').data('title'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
answered Nov 11 at 14:27
charlietfl
138k1286118
138k1286118
I'm a big fan of.data()
but it should be noted that it won't actually set the attribute on the DOM node.
– Pointy
Nov 11 at 14:33
@Pointy found a surprising issue with it also where when used to set in a parent doc you couldn't access it from within an iframe using the iframe version of jQuery global. I always assumed it used Element.dataset in more recent versions but turns out it doesn't. Had to dowindow .parent.$(selector).data()
to get it
– charlietfl
Nov 11 at 14:38
add a comment |
I'm a big fan of.data()
but it should be noted that it won't actually set the attribute on the DOM node.
– Pointy
Nov 11 at 14:33
@Pointy found a surprising issue with it also where when used to set in a parent doc you couldn't access it from within an iframe using the iframe version of jQuery global. I always assumed it used Element.dataset in more recent versions but turns out it doesn't. Had to dowindow .parent.$(selector).data()
to get it
– charlietfl
Nov 11 at 14:38
I'm a big fan of
.data()
but it should be noted that it won't actually set the attribute on the DOM node.– Pointy
Nov 11 at 14:33
I'm a big fan of
.data()
but it should be noted that it won't actually set the attribute on the DOM node.– Pointy
Nov 11 at 14:33
@Pointy found a surprising issue with it also where when used to set in a parent doc you couldn't access it from within an iframe using the iframe version of jQuery global. I always assumed it used Element.dataset in more recent versions but turns out it doesn't. Had to do
window .parent.$(selector).data()
to get it– charlietfl
Nov 11 at 14:38
@Pointy found a surprising issue with it also where when used to set in a parent doc you couldn't access it from within an iframe using the iframe version of jQuery global. I always assumed it used Element.dataset in more recent versions but turns out it doesn't. Had to do
window .parent.$(selector).data()
to get it– charlietfl
Nov 11 at 14:38
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53249605%2fusing-stringify-on-json-object-to-use-in-html-data-attribute%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
hi Asa, have you try jQuery.data()? it work perfectly for this situations. if you have jquery, use it.link
– Neo Anderson
Nov 11 at 14:19
@NeoAnderson hi, As I mentioned in the post, I'm aware of it but I'd prefer to keep it in the attribute. The attributes are there on existing elements created server side and I just want to keep everything consistent.
– Asa Carter
Nov 11 at 14:22
2
You could create the
<div>
and then usesetAttribute()
to set the value to the JSON string.– Pointy
Nov 11 at 14:25
It seems that you might need to write your own string.replace formula to get rid of the double quotes or other special characters. Is the expectation that you would also be pulling down that JSON again and parsing it for later use in your application?
– Ben Steward
Nov 11 at 14:26
if you Insist that dont use .data() . what about use encodeURI and decodeURI. , as one prepare-like function for this problem. you can do this : encodeURI(JSON.stringify(data))
– Neo Anderson
Nov 11 at 14:33