CODEWITHSUNDEEP
jsondojo
pvitt
pvitt

Reputation: 1065

Data Source not appearing for dijit select when set to json datastore

I'm trying to set my dijit Select data source to a datastore in json format, but only boxes appear in my dropdown -- not text from the data store. The data store is pulled from a database and is in the format:

{
    "GetReachesResult":[
        {
            "reach":"CRC"
        },
        {
            "reach":"IV"
        },
        {
            "reach":"IVA"
        },
        {
            "reach":"IVB"
        },
        {
            "reach":"IVD"
        },
        {
            "reach":"IVE"
        },
        {
            "reach":"V"
        }
    ]
}

the module of code that attempts to set the store for the dropdown is:

define(['dojo/store/Memory', 'dojo/_base/xhr', "dojo/data/ObjectStore"],
//functions to get data and fill data stores
function (Memory, xhr, ObjectStore) {
    return {
        GetReaches: function (url) {
            xhr.get({//get data from database
                url: url,
                //url: url,
                handleAs: "json",
                load: function (result) {
                    var ReachData = result.GetReachesResult; //GetReachesResult is default reach of GetReaches Method
                    var ReachStore = new Memory({ data: ReachData });
                    var oReachStore = new ObjectStore({ objectStore: ReachStore });
                    DD.setStore(oReachStore);
                },
                error: function (err) { }

            });
        } //GetReaches
    }
});

The call from the main page to the module is:

....
        DD = new Select({
            style: { width: '250px' }
        }, "DropDownDiv");
        DD.startup();
        var myButton = new Button({
            label: "Get Data",
            onClick: function () {
                Data.GetReaches(dataServiceUrl);
            }
        }, "ButtonDiv");

});

Any ideas? Thanks

Upvotes: 1

Views: 83

Answers (2)

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44665

I noticed that you solved your error by changing the reach property to label. However, you can configure the property used for the label by using the labelAttr property, for example:

DD = new Select({
    style: { width: '250px' },
    labelAttr: 'reach'
}, "DropDownDiv");

This should work fine as well, as you can see in this JSFiddle: http://jsfiddle.net/5JKx6/

The best way of learning these properties is by taking a look at the API documentation.

Upvotes: 1

pvitt
pvitt

Reputation: 1065

The problem was my json data -- for the select to display the data I needed to change the object attribute name from 'reach' to 'label'. I guess Select only displays attributes with the name label

Upvotes: 1

Related Questions