append data to webpage by iterating json object returned (echo) by php

I am using cakephp to develop a webpage that dynamically append data retrieved from server. The appended data can be turned in jquery accordions (not shown).

I've tried some suggestions as seen in other topics, but still nothing shows up on the webpage.

The javascript is as such:

<script type="text/javascript">
$.getJSON('viewmjcatjson.ctp', function(data){
var content = '<div id="majorcat">\n';
      $.each(data, function(index,cat){

            content += '<h2><a href="#">' + cat.category + '</a></h2><div>\n';  
        content += cat.description + '</div>\n'; 

        });
$("#majorcat").append(content);
});
</script>

The 'viewmjcatjson.ctp' is as such:

<?php
Configure::write('debug', 0);
echo json_encode($majorCategories);
?>

The json object returned is valid (checked with jsonlint)

[{
    "MajorCategories":{
        "category":"Corporate Governance",
        "description":"description on Corporate Governance"
    }
},
{
    "MajorCategories":{
        "category":"Earnings Report",
        "description":"description on Earnings Report"
    }
},
{
    "MajorCategories":{
        "category":"Equity",
        "description":"Relating to stock"
    }
},
{
    "MajorCategories":{
        "category":"Financial Issue",
        "description":"The area of finance dealing with monetary decisions that business enterprises make and the tools and analysis used to make these decisions"
    }
}
]

I am suspecting something is wrong in the each loop, but I am not sure.

EDIT The entire php file containing the javascript.

<?php echo $html->script('jquery-1.5.1.min.js'); ?>
<?php echo $html->script('jquery-ui-1.8.13.custom.min.js'); ?>
<?php echo $html->css('ui-lightness/jquery-ui-1.8.13.custom.css'); ?>

<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/ui.accordion.js"></script>

<div class="users form">
<h1><?php echo $article['Article']['title']?></h1>
<p><small>Author: <?php echo $article['Article']['author_all']?></small></p>
<p><?php echo $article['Article']['full_text']?></p>
<br>
<hr>
<br>
<table>
  <tr>
    <td width="60%">
<div id="majorcat">
</div>
</td>
<td width="40%">
<div id="minorcat">
</div>
</td>
</tr>
</table>
</div>

<div class="actions">
<h3><?php __('Menu'); ?></h3>
<ul>
    <li><?php echo $this->Htm开发者_Python百科l->link(__('Logout', true),
        array('controller' => 'users', 'action' => 'logout'));?></li>
</ul>
</div>

<script type="text/javascript">
$(function(){
$.getJSON('viewmjcatjson.ctp', function(data){
        var content = '<div id="majorcat">\n';
            $.each(data, function(index,cat){
                content += '<h2><a href="#">' + cat.category + '</a></h2><div>\n';  
            content += cat.description + '</div>\n'; 
            });
 $("#majorcat").append(content);
});
})
</script>

---

<script type="text/javascript">
$(function(){ 
    $.getJSON('viewmjcatjson.ctp', function(data){
          var content = '<div>'; 
          $.each(data, function(index,cat){
             content += '<h2><a href="#">' + cat.MajorCategories.category + '</a></h2>      <div>';  
              content += cat.MajorCategories.description + '</div>'; 
          });
    $("#majorcat").append(content);
    });
})
</script>

You're missing the document.ready

---

I noticed Firebug console showing that 'viewmjcatjson' is responding not with json-encoded data but with a HTML file. The contents is actually exactly the same as the PHP file.

So I deduced it could be a routing problem. Changing to...

$.getJSON('../viewmjcatjson', function(data){

...solves the problem.

Thanks Interstellar_Coder for the fixed code though.