I'm experiencing a peculiar issue with D3 where it refuses to accept my JSON data when referenced by a variable, but oddly enough, if I print the data to the console and manually paste it back into the same variable, it works perfectly fine.
The following JSON source doesn't seem to work:
function reformat(data) {
var jsonObject = JSON.parse(data, function(k, v) {
return (typeof v === "object" || isNaN(v)) ? v : parseInt(v, 10);
});
var treeData = (JSON.stringify(makeTree(jsonObject), null, 4));
//etc code for D3
}
However, if I log the data to the console and define it as follows:
treeData = [
{
"id": 1,
"name": "Start",
"children": [
{
"id": 2,
"name": "Decision A",
"children": [
{
"id": 4,
"name": "Possibility A-1",
"children": [
{
"id": 8,
"name": "Consequence A-1"
}
]
},
{
"id": 5,
"name": "Possibility A-2",
"children": [
{
"id": 9,
"name": "Consequence A-2"
}
]
}
]
},
{
"id": 3,
"name": "Decision B",
"children": [
{
"id": 6,
"name": "Possibility B-1",
"children": [
{
"id": 10,
"name": "Consequence B-1"
}
]
},
{
"id": 7,
"name": "Possibility B-2",
"children": [
{
"id": 11,
"name": "Consequence B-2"
}
]
}
]
}
]
}
];
It suddenly works without any issues. It's quite frustrating to have to keep copying and re-declaring the variable. If the outputs are identical, why does it behave this way?
The function is triggered once the web page loads:
function reqListener () {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.onload = function() {
reformat(this.responseText);
};
oReq.open("get", "getData.php", true);
oReq.send();