Jit.js, Jquery Json & PHP json_encode odd issues - php

Question

I chose to use JIT.js rgraph for a project I am working on. What I've done was taken the examples and began slowly merging the js into the projects core files. Simple! The hang up I've run into has me literally stumped.
example.js has (assumed to be hand written at some point) json like so.
var json = {
id: "190_0",
name: "Pearl Jam",
children: [{
id: "306208_1",
name: "Pearl Jam & Cypress Hill",
data: {
relation: "<h4>Pearl Jam & Cypress Hill</h4><b>Connections:</b><ul><li>Pearl Jam <div>(relation: collaboration)</div></li><li>Cypress Hill <div>(relation: collaboration)</div></li></ul>"
},
children: [{
id: "84_2",
name: "Cypress Hill",
data: {
relation: "<h4>Cypress Hill</h4><b>Connections:</b><ul><li>Pearl Jam & Cypress Hill <div>(relation: collaboration)</div></li></ul>"
},
children: []
}]
},...
I need the json file dynamically generated in a sense and the most productive way for me to use the json is to create a static file if/when relative parts of the project are updated instead of generating json every time the page loads. Makes sense right?
json.php looks like this
$project = array(
"id" => "1",
"name" => "Testing Project",
"children" => array (
"id" => "2",
"name" => "Sub 1",
"data" => array(
"relation" => "<h4>Testing Project</h4><b>Structure:</b><ul><li>Sub1</li><li>Section 1</li></ul>"
),
"children" => array(
"id" => "3",
"name" => "Section 1",
"data" => array(
"relation" => "<h4>Section 1</h4><b>Structure:</b><ul><li>Testing Project</li><li>Sub 1</li></ul>"
),
"children" => ''
)
)
);
// header('Content-type: application/json'); /* DOES NOTHING */
echo json_encode($project);
my Arrays are hand written at the moment to make sure the process works as intended before programmatically generating the arrays from the database. There are other pieces to the puzzle I do not believe are at all involved at this time but the next piece we need to look at is the ajax call to fetch json.php which is in my custom.js file.
function init() {
var json = (function () {
var json = null;
$.ajax({
'async': false,
'global': true,
'url': 'js/json.php',
'dataType': "json",
'success': function (data) {
json = data;
console.log(data);
}
});
return json;
})(); ... continue with JIT.js functions
I added console.log(data) to see if the json was coming back formatted and this is what that looks like console.log screenshot using custom.js ajax call So then I reused the example.js file and console.log(data) give us console.log screenshot using example.js
The only obvisou difference is that the example.js json is be represented as an array, not an object. Even stranger still is that when I run the example using the custom.js file with the ajax call "Testing Project" does appear on the graph but no children elements. In the screenshot for custom.js console.log shows all the children elements as children: object, not children:Array[] like example.js
My first thought was to see if I can ensure that all json_encoding forced the associative arrays into "arrays". And yea... lots of time wasted looking at the obvious. So my next thought was it must be in the formatting. example.js used [{ for each child element but json_encode does not. I cannot locate any information to confirm if that really is the problem or not, but, none the less I cant rule that out. I also checked into sequential indexes. example.js certainly does not have sequential indexes. I even went ahead and sorted the arrays before encoding json_encode(array_values($project)); to see what happens and while it outputs to a browser with indexes it of course shows nothing in the graph.
I feel like im spinning in circles ( not in the good eagle circling prey kinda way ) but getting to far off focus to figure this out. I need some fresh perspective and ideas what might be going wrong.
**Edit
I've also tried to convert the strings manually with PHP. still not working. Any ideas?

Answer 1

WOW, Just over 24 hours and I end up doing something like this. It works by making each child with content an array of arrays.
$test = array(
'id' => "1",
'name' => "testing sample",
'children' => array(
array(
...
),array(
...
'children' =>array(),
),
)
);
echo json_encode($test);