About Ajax and echo/json/ problem

About Ajax and echo/json/ problem

Hi:
I meet a problem about the usage of Ajax when seeing the example about treetable, the code example
is in http://jsfiddle.net/djlerman/bbj8k9pe/,  and the main problem is about Ajax and url: '/echo/json/',
the code snippet is as following:
  1. function getNodeViaAjax(parentNodeID) {
        $("#loadingImage").show();
        debugger;
        // ajax should be modified to only get childNode data from selected nodeID
        // was created this way to work in jsFiddle
        $.ajax({
            type: 'POST',
            url: '/echo/json/',
            data: {
                json: JSON.stringify( jsonData )
            },
            success: function(data) {
                $("#loadingImage").hide();
       
                var childNodes = data.nodeID[parentNodeID];
               
                if(childNodes) {
                    var parentNode = $("#example-basic").treetable("node", parentNodeID);

                    for (var i = 0; i < childNodes.length; i++) {
                        var node = childNodes[i];

                        var nodeToAdd = $("#example-basic").treetable("node",node['ID']);

                        // check if node already exists. If not add row to parent node
                        if(!nodeToAdd) {
                            // create row to add
                            var row ='<tr data-tt-id="' +
                                node['ID'] +
                                '" data-tt-parent-id="' +
                                parentNodeID + '" ';
                            if(node['childNodeType'] == 'branch') {
                                row += ' data-tt-branch="true" ';
                            }

                            row += ' >';

                            // Add columns to row
                            for (var index in node['childData']) {
                                var data = node['childData'][index];
                                row += "<td>" + data + "</td>";
                            }

                            // End row
                            row +="</tr>";
                           
                            $("#example-basic").treetable("loadBranch", parentNode, row);
                        }



                    }
               
                }

            },
            error:function(error){
                $("#loadingImage").hide();
                alert('there was an error'); 
            },
            dataType: 'json'
        });
    }
            var jsonData = {
                "nodeID": {
                    "1": [

                       {
                           "ID": "1.1",
                           "childNodeType": "branch",
                           "childData": [
                             "1.1: column 1",
                             "1.1: column 2"
                           ]
                       },
                      {
                          "ID": "1.2",
                          "childNodeType": "leaf",
                          "childData": [
                            "1.2: column 1",
                            "1.2: column 2"
                          ]
                      },
                      {
                          "ID": "1.3",
                          "childNodeType": "leaf",
                          "childData": [
                            "1.3: column 1",
                            "1.3: column 2"
                          ]
                      }

                    ],
                    "1.1": [

                        {
                            "ID": "1.1.1",
                            "childNodeType": "leaf",
                            "childData": [
                              "1.1.1: column 1",
                              "1.1.1: column 2"
                            ]
                        },
                        {
                            "ID": "1.1.2",
                            "childNodeType": "leaf",
                            "childData": [
                              "1.1.2: column 1",
                              "1.1.2: column 2"
                            ]
                        }

                    ],
                    "2": [

                        {
                            "ID": "2.1",
                            "childNodeType": "leaf",
                            "childData": [
                              "2.1: column 1",
                              "2.1: column 2"
                            ]
                        },
                        {
                            "ID": "2.2",
                            "childNodeType": "leaf",
                            "childData": [
                              "2.2: column 1",
                              "2.2: column 2"
                            ]
                        },
                        {
                            "ID": "2.3",
                            "childNodeType": "leaf",
                            "childData": [
                              "2.3: column 1",
                              "2.3: column 2"
                            ]
                        }

                    ],
                    "3": [

                        {
                            "ID": "3.1",
                            "childNodeType": "leaf",
                            "childData": [
                              "3.1: column 1",
                              "3.1: column 2"
                            ]
                        },
                        {
                            "ID": "3.2",
                            "childNodeType": "leaf",
                            "childData": [
                              "3.2: column 1",
                              "3.2: column 2"
                            ]
                        },
                        {
                            "ID": "3.3",
                            "childNodeType": "leaf",
                            "childData": [
                              "3.3: column 1",
                              "3.3: column 2"
                            ]
                        }

                    ]
                }
            };

And since '/echo/json/' is a specify way for jsfiddle, so I modify the codes as belows:

  1.   $("#loadingImage").show();
                var test = JSON.stringify(jsonData);
                var data = JSON.parse(test);

                // ajax should be modified to only get childNode data from selected nodeID
                // was created this way to work in jsFiddle

                $("#loadingImage").hide();

                var childNodes = data.nodeID[parentNodeID];
                if (childNodes) {
                    var parentNode = $("#example-basic").treetable("node", parentNodeID);
  2.                  ......//the same as ajax success part

it working, but the problem is why it can work, because if I just using 
  1. var data = JSON.parse(jsonData);

it will not work. I don't know the exact reason, is any one know about that, thanks a lot.