How to map hierarchical Json to ItemFileWriteStore?

Question

I have Json data that has children elements. I need to bind the store to an editable grid and have the edits populated to the store. The data tree does get populated into the ItemFileWriteStore. The datagrid displays only the parent data and none of the children data.

SAMPLE.TXT

    {
    "items": [
        {
            "profileId": "1",
            "profileName": "ABC",
            "profileType": "EmailProfile",
            "profilePreferences": [
                {
                    "profilePreferenceId": "1",
                    "displayText": "Bob",
                    "address": "[email protected]"
                },
                {
                    "profilePreferenceId": "2",
                    "displayText": "Sally",
                    "address": "[email protected]"
                },
                {
                    "profilePreferenceId": "3",
                    "displayText": "Joe",
                    "address": "[email protected]"
                }
            ]
        }
    ]
}

javascript

var sampleLayout = [
  [
  { field: 'profileName', name: 'profileName', width: '100px' },
  { field: 'profilePreferences.displayText', name: 'displayText', width: '100px' },
  { field: 'profilePreferences.address', name: 'address', width: '100px' }      
  ]];


function populateGrid() {
    var url = "sample.txt"; //Will be replaced with endpoint URL

    dojo.xhrGet({
        handleAs: 'json',
        url: url,
        error: function (e) {
            alert("Error: " + e.message);
        },
        load: showJsonData
    });
}


function showJsonData(response, ioArgs) {
    var profileStore = new dojo.data.ItemFileWriteStore({
        data: {
            items: response.items
        }
    });

    var sampleGrid = dijit.byId("sampleGrid");
    sampleGrid.store = profileStore;
    sampleGrid.startup();
}

Answer 1

you need to be using dojox.grid.TreeGrid or 'fake' the JSON to present every even row with a blank profileName. Two samples follows, one for TreeGrid another on DataGrid - not tested in working environment though.

Given Hierachial JSON:

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin',
         profilePreferences: [
           { id: '1_1', displayText: 'John Doe', address: 'Big Apple' }
           { id: '1_2', displayText: 'Jane Doe', address: 'Hollywood' }
         ]

      }, {
         id: '2',
         profileName: 'Visitor',
         profilePreferences: [
           { id: '2_1', displayText: 'Foo', address: 'Texas' }
           { id: '2_2', displayText: 'Bar', address: 'Indiana' }
         ]

      }]
    }

TreeGrid Structure:

{
    cells: [
      [
        { field: "profileName", name: "profileName", width: "100px" },
        { field: "profilePreferences",
          children: [
            { field: "displayText" name: "displayText", width: "100px" },
            { field: "address" name: "address", width: "100px" }
          ]
      ]
    ]
  }

reference: dojo docs

Given flattened 'fake-children' JSON:

{
  identifier: 'id' // a good custom to make an id pr item, note spaces and odd chars are invalid

      items: [{
         id: '1',
         profileName: 'Admin', preferenceText: '', preferenceAddr: ''
     }, {
        id: '2', 
        profileName: '',      preferenceText: 'John', preferenceAddr: 'NY'
     }, {
         id: '3',
         profileName: 'Visitor', preferenceText: '', preferenceAddr: ''
     }, {

         id: '4',         // Not with '.' dot seperator like so
         profileName: '',    preference.Text: 'Jane Doe', preference.Addr: 'Hollywood'
     } ]

DataGrid structure:

[[
  {'name': 'Profilename', 'field': 'profileName', 'width': '100px'},
  {'name': 'User name', 'field': 'preferenceText', 'width': '100px'},
  {'name': 'Address', 'field': 'preferenceAddr', 'width': '200px'}
]]

reference dojo docs