JSONStore does not correctly handle JSON with '-' in property string.

[troutwine]

Yes, you are missing something: Where in the specs you posted does it say anything about a object accessors?

Though I perhaps should have said "object property accessors," Section 11.2.1 "Property Accessors". The specification, as you well know, defines both the dot and bracket notation. While the dot notation's target must be an IdentifierName, defined in section 7.6.

The object accessors that JsonReader supports are not something that is directly supported in JSON or javascript; it's something created for the benefit of the user.

If you only had javascript at your disposal then you would always have to write:

root: function(jsonData) {
  return jsonData['list-response'].value;
}

but Ext helps you with this so you can also specify a string instead of a function.

JsonReader.createAccessor supports 2 modes:
1. If the accessor string doesn't contain '.' or '[' it will use: value = jsonData[accessor];
2. If the accessor does contain '.' or '[' it will use: value = eval('jsonData' + (i > 0 ? '.' : '') + accessor);

So it will support a '-' in an accessor as long as you don't also use a '.' or '[' (mode #1), e.g.

root: 'list-response'

But if the accessor contains both '-' and '.' (like in your case 'list-response.data') then it will use mode #2 and you are required to add quotes to property names that wouldn't be valid otherwise, e.g.

root: '["list-response"].value'

Where are these modes you mention documented? I can find no reference to the JsonReader.createAccessor method in the documentation. Other sections of the current 3.3.1 documents imply that the input string literal would be split along dots with the resulting strings being used as the expression to a bracket notation lookup. This:

root: "foo.bar.baz-lite"

becomes

jsonData["foo"]["bar"]["baz-lite"]

That is an access pattern which would support JSONString, as discussed above, and would be the route of least surprise. The second step of the two mode system above is flawed: JSONReader is left unable to correctly read all valid forms of JSON identifiers. Why use the bracket notation in the first mode and the dot notation in the second when, by the standard's admission, the dot notation is an accessor which supports only a subset of Javascript's valid property accesses?

I understand now why ExtJS is failing but it seems even more of a bug than before.

[Condor]

I don't think I'll be able to convince you, but I would like to ask you a question:

What would be the root selector for the following (valid!) JSON data?

{"foo.bar": {"baz-lite": [[1, "One"], [2, "Two"], [3, "Three"]]}}

[troutwine]

Yes, indeed, that is a problem for the current algorithm: you'll end up splitting "foo.bar" into two values. I counter, however, that the current algorithm be augmented with the ability to pass in an array of string literals, in the above case

["foo.bar", "baz-lite"]

. Each string literal is then passed, in turn, as the value to a bracket-notation lookup. At any rate, the current algorithm must be better documented. It exhibits several surprising corner-cases not at all obvious from the manual as it is.

It's not that I am inconvincible; ExtJS might well be taking the median path in a land where no good choice exists. Rather, I remain unconvinced that ExtJS' current behavior is not overly complicated, unsuspected, limited and broken.

[logout]

why not supply custom Reader and DataStore and have sane json parsing.. I think GridPanel, Record, DataStore API is really weird... taking string for the magic?? I would rather supply a function to extract values from json..

Anyway, try something like this:

Ext.ns('ing.');

//ing record
//x is json that represents a Record.
ing..Record = function(x) {

    //obscure magic .
    var genRecordFields = function(o) {
        var arr = [];
        for (var key in o) {
            arr.push({name: key, mapping: key});
        }
        return arr;
    };

    //Hai, I convert x to data
    //normally, I would return data.. But ing GridPanel needs Record object.
    var data = {};

    //Use these object properties (id, name, currentLocation...) as dataIndex
    data.id = x['id'];
    data.name = x['name'];
    data.currentLocation = x['current-location']['name'];
    data.status = x['status']['name'];

    //So, from data, I get recordFields that this ing weird Ext.data.Record likes
    var recordFields = genRecordFields(data);

    //with recordFields, I can ing get the constructor for this er.
    var er = Ext.data.Record.create(recordFields);
    return new er(data, data.id);
};

//ing json reader
ing..Reader = (function() {
    var findXs = function(json) {
        return json['list-response']['value'];
    };

    return Ext.extend(Ext.data.DataReader, {
        read: function(response) {//reads the  from response
            var json = Ext.util.JSON.decode(response.responseText);
            if (!json) {
                throw 'ing  no json';
            }
            var records = findXs(json).map(ing..Record);
            return {
                success: true
                , records: records
                , totalRecords: records.length
            }
        }
    });
})();

Ext.onReady(function() {
    var remoteBedStore = new Ext.data.Store({
        autoDestroy: true,
        url: 'equipment.json',
        storeId: 'remoteBedStore',
        autoLoad: true,
        reader: new ing..Reader()
    });

    var columnModel = new Ext.grid.ColumnModel ({
        defaults : {
            sortable : true,
            width : 120
        },
        columns : [
            {
                header : 'ID',
                dataIndex : 'id',
                resizable : false,
                hidden : true
            },
            {
                header : 'Name',
                dataIndex : 'name',
                hideable : false
            },
            {
                header : 'Current Location',
                dataIndex : 'currentLocation',
                sortable : true,
                hideable : false
            },
            {
                header : 'Status',
                dataIndex : 'status',
                sortable : true
            }
        ]
    });

    var gridView = new Ext.grid.GridView();

    var grid = new Ext.grid.GridPanel ({
        title : 'BedStore',
        colModel : columnModel,
        store : remoteBedStore,
        view : gridView,
        frame : true
    });

    var pnl = new Ext.Viewport( {
        id:'panel',
        frame:false,
        layout:'fit',
        items:grid,
        renderTo : "bedstore"
    });

});

[steffenk]

I don't see the problem. In every language i know such identifiers are invalid. As there is enough control from server and client side, just prevent these invalid identifiers and you won't run in any problems.

[troutwine]

I don't see the problem. In every language i know such identifiers are invalid.

As demonstrated above, such identifiers are valid javascript; one need only use the bracket-notation accessors. This is why, of course, such identifiers are also valid JSON. The problem is that ExtJS' JSONReader is currently limiting JSON identifier support to the dot-notation syntax in some cases. As an end-user, I expect ExtJS to be clever enough to support the full range of valid Javascript/JSON identifiers or, at least, to document this inflexibility. It does neither: the crux of the issue.

As there is enough control from server and client side, just prevent these invalid identifiers and you won't run in any problems.

Your antecedent is incorrect: the consequent does not follow. However, even if I were in control of the JSON format your suggestion is a hack. JSONReader has a bug or an undocumented inability; it does not support the full range of valid Javascript/JSON identifiers. If a bug, yours is a temporary work-around that should be superseded by an ExtJs patch. If a documentation issue then yours is a work-around that must be grudgingly accepted until ExtJs is superseded.

[rupamkhaitan]

Hi

I was facing the same problem.
My nested data looks like

{
    "data": {
        "device-config": {
            "device": {
                "mac": "00-11-22-33-A8-CA",
                "hostname": "Ap228382",
                "timezone": "Etc/UTC",
                "country_code": "ai"
            }
        }
    }
}

And my store will read the nested data with hyphen as below

root: 'data["device-config"].device'

Hope this help to others as well