Why is my dijit.Tree not populated from json source?

I am new to dojo and spring development. I am trying to populate a Tree widget using a json response from a spring-mvc controller. I'm following the examples from the dojocampus website quite closely.

Firstly if I use a local data source it works ok:

<script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.Tree");

    dojo.addOnLoad(function() {
        var rawdata = [{"rid":"b1c","name":"Test Parent","children":[{"rid":"1c4","name":"Test Child 1","children":[]},{"rid":"ee6","name":"Test Child 2","children":[]}]}];

        var store = new dojo.data.ItemFileReadStore({
            data: {
                identifier: 'rid',
                label: 'name',
                items: rawdata
            }
        });

        var treeModel = new dijit.tree.TreeStoreModel({
            store: store,
            query: {name: 'Test Parent'},
            childrenAttrs: ["children"]
        });

        new dijit.Tree({
            model: treeModel
        },
        "treeOne");
    });
</script>

<div id="treeOne">
</div>    

But if I use my json url the tree doesn't appear:

<script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.Tree");

    dojo.addOnLoad(function() {

        var store = new dojo.data.ItemFileReadStore({
            url: "/Demo2/glossaryobjects/categories.json"
        });

        var treeModel = new dijit.tree.TreeStoreModel({
            store: store,
            query: {name: 'Test Parent'},
            childrenAttrs: ["children"]
        });

        new dijit.Tree({
            model: treeModel
        },
        "treeOne");
    });
</script>

<div id="treeOne">
</div> 

When I debug with Firebug I can see that the json response appears to be loaded correctly. It looks like this:

{"identifier":"rid","items":{"rid":"b1c","name":"Test Parent", "children":[{"rid":"1c4","name":"Test Chi开发者_高级运维ld 1","children":[]}, {"rid":"ee6","name":"Test Child 2","children":[]}]}, "label":"name"}

There is an error in Firebug:

"dijit.tree.TreeStoreModel: query {"name":"Test Parent"} returned 0 items, but must return exactly one item"

It looks like the ItemFileReadStore is not correctly loaded. Anyone know what I'm doing wrong? I've been tearing my hair out for days trying to get this to work, so any help is much appreciated.

Cheers, Rod.

---

OK! Problem solved (for me):

If you have a close look at the store produced by each, the data is there for both, but the way the store represents each is different.

With the url JSON data, you get _arrayofallitems [] _arrayoftoplevelitems Object {.... id... items... etc.

with the string data, you get _arrayofallitems [] 62 items _arrayoftoplevelitems [0] id items etc.

If you intercept the JSON response from xhrGet, and compare it to the string, you'll see that the JSON response is not an array (no []) whereas the string is.

Solution: declare an empty array, push the JSON response into it, then pass the array to ItemFileReadStore:

dojo.xhrGet( {
       url: 'test.php',
       handleAs: "json",
       preventCache: 'true',
       load: function(response, ioArgs){
                  var rawdata = [];
                  rawdata.push(response);
                  var store = new dojo.data.ItemFileReadStore({ data: {
                     identifier: "id",
                     label: "label",
                 items: rawdata  }
             });
             loadtree(store);
}});

It worked for me (finished an afternoon of frustration)...

---

The error you mentioned: "dijit.tree.TreeStoreModel: query {"name":"Test Parent"} returned 0 items, but must return exactly one item"

Should be from using a TreeStoreModel instead of a ForestStoreModel. The former requires only one item be returned for the root node. Your fix probably worked because you shoved it into a single array.

Take a look at: http://ofps.oreilly.com/titles/9780596516482/application_widgets.html