Why Is my json-object from AJAX not understood by javascript, even with 'json' dataType?

Question

My js code simply gets a json object from my server, but I think it should be automatically parsed and turned into an object with properties, yet it's not allowing access properly.

    $.ajax({
      type: 'POST',
      url: '/misc/json-sample.js',
      data: {href: path}, // THIS IS THE POST DATA THAT IS PASSED IN; safe2ignore.
      dataType: 'json',
      success: function (datax) {

  if (datax.debug) {
    alert('Debug data: ' + datax.debug);
  }  else {
         alert('No debug data: ' + datax.toSource()  ) ; 
      }

The /misc/json-sample.js file is: [ { "path": "examplemodule/parent1/child1/grandchild1", "title": "First grandchild option", "debug": "First grandchild option", "children": false } ]

(I have also been trying to return that object from drupal as follows, and the same results.) Drupal version of misc/json-sample.js:

 $items[] = array(
      'path' => 'examplemodule/parent1/child1/grandchild1',
      'title' => t('First grandchild option'),
          'debug' => t('debug me!'),
      'children' => FALSE
    );
    print  drupal_to_js($items);

What happens (in FF, which has the toSource() capability) is the alert with 'No debug data: [{path:"examplemodule/parent1/child1/grandchild1", title:"First grandchild option", debug:"First grandchild option", children:false}]' Thanks

Answer 1

You need to set the Content-Type header to application/json.

header("Content-Type: application/json");
print  drupal_to_js($items);