Sencha Touch 2 read values from key AND value from nested JSON

Question

I am trying to load some JSON, in which I store a lot of variables about some 100 anaesthetic drugs for pediatric patients.

The actual values get calculated before from patient's weight, age etc.:

Example:

var propofolInductionTitle = propofolName + ' ' + propofol0PercentConcentration + '- Induktion';
var propofol0InductionDosageMG = (Math.round(kg * 2 * 10) / 10) + ' - ' + (Math.round(kg * 5 * 10) / 10);

I then create my drug as a block of json consisting of the variables I need which are later to be replaced by the calculated values. I specifically try to avoid Strings in the JSON to allow for easier localization to english and french when all variables are defined in the math block.

var hypnotikaJSON = {
            "thiopentalTitle": [
                {"thiopentalBrandName": ""},
                {"vialContentTitle": "thiopentalVialContent"},
                {"solutionTitle": "thiopentalSolution"},
                {"concentrationTitle": "thiopentalConcentration"},
                {"dosageString": "thiopentalDosageString"},
                {"atWeight": "thiopentalDosageMG"},
                {"thiopentalAtConcentration": "thiopentalDosageML"}
            ],
            "propofolInductionTitle": [
                {"propofolInductionBrandName": ""},
                {"propofolVialContentTitle": "propofolInductionVialContent"},
                {"propofolSolutionTitle": "propofolSolution"},
                {"propofolConcentrationTitle": "propofolInductionConcentration"},
                {"propofolInductionDosageStringTitle": "propofolInductionDosageString"},
                {"atWeight": "propofolInductionDosageMG"},
                {"propofolAtInductionConcentration": "propofolInductionDosageML"}
            ],
            "propofolSedationTitle": [
                {"propofolSedationBrandName":""},
                {"propofolVialContentTitle":"propofolSedationVialContent"},
                {"propofolSolutionTitle":"propofolSolution"},
                {"propofolConcentrationTitle":"propofolSedationConcentration"},
                {"propofolSedationDosageStringTitle":"propofolSedationDosageString"},
                {"atWeight":"propofolSedationDosageMG"},
                {"propofolAtSedationConcentration":"propofolSedationDosageML"}
            ],
            "laryngealMaskTitle": [
                {"laryngealMaskSizeTitle":"laryngealMaskSize"},
                {"laryngealMaskCuffSizeTitle":"laryngealMaskCuffSize"},
                {"laryngealMaskBiggestETTTitle":"laryngealMaskBiggestETT"},
                {"laryngealMaskBronchoscopeSizeTitle":"laryngealMaskBronchoscopeSize"}
            ]
    };

My specific need is that the JSON reader has to give me the key AND value of each object as I need both to populate a template. The reason ist that the fields for the drugs are different in parts. Some have additional routes of administration so I have another key:value pair a different drug doesnt have. Some are given both as bolus and per drip, some arent. So no convenient json structure ist possible. I found an answer by rdougan here that partly allowed me to do just that:

Model:

Ext.define('my.model.Drug', {
        extend: 'Ext.data.Model',
        config: {
            fields: ['name', 'value']
        }
    });

Custom Json Reader:

Ext.define('Ext.data.reader.Custom', {
        extend: 'Ext.data.reader.Json',
        alias: 'reader.custom',
        getRoot: function (data) {
            if (this.rootAccessor) {
                data = this.rootAccessor.call(this, data);
            }

            var values = [],
                name;

            for (name in data) {
                values.push({
                    name: name,
                    value: data[name]
                });
            }

            return values;
        }
    });

Store:

var store = Ext.create('Ext.data.Store', {
        fields: ['name', 'value'],
        data: hypnotikaJSON,
        autoLoad: true,
        proxy: {
            type: 'memory',
            reader: {
                type: 'custom'
            }
        }
    });

Panel:

this.viewport = new Ext.Panel({
        fullscreen: true,
        layout: 'fit',
        items: [{
            xtype: 'list',
            itemTpl: '<p class="description">{name}</p><p class ="values">{value}</p>',
            store: store
        }]
    });

Unfortunately I'm a physician and no programmer, and after a lot of reading I cant find out to apply this to a nested JSON. The custom reader seems to only go for the first level. I could do it without a reader, without a store with just a lot of plan html around each entry, that has proven to be very very slow though so I would like to avoid it while updating from Sencha Touch 1.1. and better do it right this time.

Could you please point me to a way to parse this ugly data structure?

Thank you

Could you be a bit more specific about what you would like the output of the reader to be? Is it something like 'name' and 'value' nested in the parent 'value' ? Maybe you could explain the purpose, or tell us how you would like to display your store... The thing I wonder is why you use an array for your inner items ([]) and not for the outer items ({})? — borck
I mean, you use arrays for your inner items ("thiopentalTitle": [...]) and not for the outer items (hypnotikaJSON = {...})? If you used (hypnotikaJSON = [...]) instead, there might be no need for a custom reader... — borck
Thank you for thinking about it. What I try to achieve ist basically this (image). — kreftt
I have about 100 drugs, all of them share some properties, like every drug is in a vial which has a content. Every drug is diluted somehow, which means they have solution properties and resulting concentration properties. unfortunately some drugs can be given via different access routes or in different situations, so the number of properties an drug has varies. Each property is a pair consisting of the title of the property and the value itself which should be displayed on screen: — kreftt
One row with the title of the drug and then one row with the Title of the property on the left and the value on the right. So the reader needs to tell me what the name of the drug is (first level) (so I can output it as an h1 in the template) and then stupidly deliver title and value of each property row by row without needing to know how many properties there are, which the array reader seems to need to know. I want to keep the template as simple as possible as one template is supposed to be used for all 100 drugs. Was that any clearer? English isnt my native language sorry. — kreftt

Adam Klein Adam Klein · Accepted Answer · 2012-05-16T19:20:50

I don't know much about extending JSON readers, so just guessing, but maybe you are supposed override the 'read' method? Then you can go over the JSON as you wish

Also, if you have control over the JSON you should consider changing it.
Usually, the keys in JSON should be the same throughout all items in the array.
keys are not data, they are metadata.
So, if you do have different properties between different drugs, then something like this might be a solution:

[{

name: 'Propofol 1%',
properties: [

{title: 'induction', value: '22-56g'},
{title: 'Sedation', value: '22'},
etc.
]},
{name: 'nextDrug'}
etc..

Sencha Touch 2 read values from key AND value from nested JSON

1 Answers