I've being trying to parse a hardcoded JSON string to an usable format, but I can't find a way to get it work, getting 'Unexpected token' or just weird outputs. Library used: jQuery. The data to be stored is:
x:10
y,10
and
x:200
y:10
It's stored in a data attribute called data-pos, and I've tried multiple solutions, listed below:
- Token error results (all combinations):
Used functions
JSON.parse(data);
$.parseJSON(data);
jQuery.parseJSON(data);
Data formats
data-pos="{'x':10,'y':10}"
data-pos="{'x':'10','y':'10}"
data-pos="{x:'10',y:'10'}"
data-pos="{x:10,y:10}"
- Just weird output (no parsing):
Used functions
alert(data);
--> output:
!!DATA AS IS!!
!!DATA AS IS!!
alert ('x: ' + data.x + ' y: ' + data.y); /* Using {x: 200, y: 10} format */
--> outputs:
x: undefined y: undefined
x: {y' <-- Yep, THIS. No typos. IDK what the hell is going on.
Data formats
data-pos="{'x':10,'y':10}"
data-pos="{'x':'10','y':'10}"
data-pos="{x:'10',y:'10'}"
data-pos="{x:10,y:10}"
Sourcefile:
<html>
<head>
<script>var devmode = true</script>
<script>var loadExec=false</script>
<script src="/files/js/jquery.min.js"></script>
</head>
<body id="body" class="selectable nooverflow">
<div class="container hidden desktop">
<div class="window selectable" data-pos=!!DATA!!>
<div class="titlebar">
<span class="titletext" onmousedown="movingW=true" onmouseup="movingW=false">Window 1</span>
</div>
</div>
<div class="window" data-pos=!!DATA!!>
<div class="titlebar">
<span class="titletext" onmousedown="movingW=true" onmouseup="movingW=false">Window 2</span>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="/files/css/style.css">
<script src="/files/js/core.js"></script> <!-- irrelevant -->
<script src="/files/js/subcore.js"></script> <!-- irrelevant -->
<script>
$(function () {
$(window).on("load", function () {
$('.window').each(function (index) {
if (!loadExec) {
var data = $(this).data('pos');
//alert(data + "\nDatatype: " + (typeof data));
if (data) {
alert(data);
//PARSING HERE!! <----------
$(this).css({ 'top': data.y, 'left': data.x, position: 'absolute' });
}
loadExec = true;
$('.container').removeClass('hidden');
}
});
});
});
</script>
</body>
</html>
I've been searching but all I could find was unsuccesfull or ajax orientated. I just need to embed this JSON string in an attribute or some inside-DOM way. I just can't find the solution.
THANKS FOR YOUR TIME!
I've being trying to parse a hardcoded JSON string to an usable format, but I can't find a way to get it work, getting 'Unexpected token' or just weird outputs. Library used: jQuery. The data to be stored is:
x:10
y,10
and
x:200
y:10
It's stored in a data attribute called data-pos, and I've tried multiple solutions, listed below:
- Token error results (all combinations):
Used functions
JSON.parse(data);
$.parseJSON(data);
jQuery.parseJSON(data);
Data formats
data-pos="{'x':10,'y':10}"
data-pos="{'x':'10','y':'10}"
data-pos="{x:'10',y:'10'}"
data-pos="{x:10,y:10}"
- Just weird output (no parsing):
Used functions
alert(data);
--> output:
!!DATA AS IS!!
!!DATA AS IS!!
alert ('x: ' + data.x + ' y: ' + data.y); /* Using {x: 200, y: 10} format */
--> outputs:
x: undefined y: undefined
x: {y' <-- Yep, THIS. No typos. IDK what the hell is going on.
Data formats
data-pos="{'x':10,'y':10}"
data-pos="{'x':'10','y':'10}"
data-pos="{x:'10',y:'10'}"
data-pos="{x:10,y:10}"
Sourcefile:
<html>
<head>
<script>var devmode = true</script>
<script>var loadExec=false</script>
<script src="/files/js/jquery.min.js"></script>
</head>
<body id="body" class="selectable nooverflow">
<div class="container hidden desktop">
<div class="window selectable" data-pos=!!DATA!!>
<div class="titlebar">
<span class="titletext" onmousedown="movingW=true" onmouseup="movingW=false">Window 1</span>
</div>
</div>
<div class="window" data-pos=!!DATA!!>
<div class="titlebar">
<span class="titletext" onmousedown="movingW=true" onmouseup="movingW=false">Window 2</span>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="/files/css/style.css">
<script src="/files/js/core.js"></script> <!-- irrelevant -->
<script src="/files/js/subcore.js"></script> <!-- irrelevant -->
<script>
$(function () {
$(window).on("load", function () {
$('.window').each(function (index) {
if (!loadExec) {
var data = $(this).data('pos');
//alert(data + "\nDatatype: " + (typeof data));
if (data) {
alert(data);
//PARSING HERE!! <----------
$(this).css({ 'top': data.y, 'left': data.x, position: 'absolute' });
}
loadExec = true;
$('.container').removeClass('hidden');
}
});
});
});
</script>
</body>
</html>
I've been searching but all I could find was unsuccesfull or ajax orientated. I just need to embed this JSON string in an attribute or some inside-DOM way. I just can't find the solution.
THANKS FOR YOUR TIME!
Share Improve this question edited May 27, 2016 at 10:55 Akryllax asked May 27, 2016 at 10:52 AkryllaxAkryllax 1401 gold badge1 silver badge6 bronze badges1 Answer
Reset to default 18In JSON, quotes must be double quotes, and all property names must be strings (e.g., in quotes), so none of the data formats you listed is correct. This would be correct:
data-pos='{"x":10,"y":10}'
or if it's important to put the attribute value in double quotes, since the content of attributes is HTML text (something people tend to forget), you could use ":
data-pos="{"x":10,"y":10}"
...but only do that if you absolutely have to use " instead of ' around the attribute value.
For details about JSON, including the fact that strings and property names must be in double quotes, refer to the JSON website.
Examples:
console.log("a's data:", $("#a").data("pos"));
console.log("b's data:", $("#b").data("pos"));<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a" data-pos='{"x":10,"y":10}'></div>
<div id="b" data-pos="{"x":10,"y":10}"></div>