1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Scottsdale, Arizona
    Posts
    7
    Vote Rating
    0
    trondina is on a distinguished road

      0  

    Default Unanswered: Nested Data in JSON object

    Unanswered: Nested Data in JSON object


    In my MVC project, I have a JSON datasource that I need to pull all data from and then bind to a list to a list that resides inside of a tab on a tabpanel. Here is my code:

    JSON DATA (abbreviated content)
    Code:
     
    {        
    "vendor": [
                 {
                    "vendorId": "MCD",
                    "vendorName": "McDonald's",
                    "logoURL": "touch/resources/images/logos/mcdonalds.png",
                    "foods": [
                        {
                            "foodItem": "Big Mac",
                            "ItemPrice": 5.00
                        }
                    ]
                },
                {
                    "vendorId": "LCP",
                    "vendorName": "Little Caesars Pizza",
                    "logoURL": "touch/resources/images/logos/littlecaesars.png"
                },
                {
                    "vendorId": "GMR",
                    "vendorName": "Garcia's",
                    "logoURL": "touch/resources/images/logos/garcias.png"
                },
                {
                    "vendorId": "BLMP",
                    "vendorName": "Blimpie's",
                    "logoURL": "touch/resources/images/logos/blimpie.png"
                },
                {
                    "vendorId": "BJIC",
                    "vendorName": "Ben & Jerrys Ice Cream",
                    "logoURL": "touch/resources/images/logos/benjerry.png"
                }
    ]
    }
    My models are as follows:
    Code:
    Ext.define('Fanx.model.Vendor', {    extend: 'Ext.data.Model',
    
    
        config: {
    
    
            fields: [
                { name: 'vendorId', type: 'string' },
                { name: 'vendorName', type: 'string' },
                { name: 'logoURL', type: 'string' }
            ],
    
    
            associations: [
                {type: 'hasMany', model: 'Fanx.model.Food', name: 'foods', associationKey: 'food' }
    
    
            ],
    
    
            proxy: {
                type: 'ajax',
                url: '/app/model/data/vendors.json',
                reader: {
                    type: 'json',
                    rootProperty: 'vendor'
                }
            }
        }
    
    
    });
    
    xt.define('Fanx.model.Food', {
        extend: 'Ext.data.Model',
        id: 'foodmenu',
    
    
        config: {
    
    
            fields: [
                { name: 'foodItem', type: 'string' },
                { name: 'foodPrice', type: 'float' }
            ]
    
    
        },
        belongsTo: 'Fanx.model.Vendor'
    
    
    });
    Tabpanel class:
    Code:
    Ext.define('Fanx.view.vendor.VendorMenu', {    extend: 'Ext.TabPanel',
    
    
    
    
        xtype: 'vendormenu',
    
    
        config: {
            fullscreen: true,
            scrollable: true,
            tabBarPosition: 'bottom',
            layout: {
                pack: 'center'
            },
    
    
    
    
            defaults: {
                styleHtmlContent: true
            },
    
    
            items: [
                {
                    xtype: 'list',
                    title: 'Food',
                    styleHtmlContent: true,
                    iconCls: 'food',
                    store: {
                        model: 'Fanx.model.Vendor',
                        autoLoad: true
    
    
                    },
                    itemTpl:
                        [
    
    
                                '<tpl for=".">',
                            '<tpl for="food">',
                                    '<div>[foodItem}</div>',
                            '</tpl>',
                            '</tpl>'
                        ]
    
    
                },
                {
                    xtype: 'list',
                    title: 'Drinks',
                    iconCls: 'soda'
                },
                {
                    xtype: 'list',
                    title: 'Snacks',
                    iconCls: 'snacks'
                },
                {
                    xtype: 'list',
                    title: 'Sweets',
                    iconCls: 'sweets'
                },
                {
                    xtype: 'list',
                    title: 'Beer',
                    iconCls: 'beer'
                }
            ]
        }
    
    
    });
    The panel renders, but what I get is a blank list that is 17 items long. The 17 items are each of the parent "vendor" objects within the json file. I want to display the child "FOOD" object fields via the itemTpl. I believe i have associated my models correctly.

    please help. Thanks in advance!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,801
    Answers
    3467
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It looks like you are trying to show associated data in a list correct?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    7
    Answers
    1
    Vote Rating
    0
    cesarecf is on a distinguished road

      0  

    Default


    Did you copied-pasted everything? because i don't know if it was a mistake at copying pasting it's your real problem:

    You're missing an "E" in your models code, an "E" at the beginning of the second code, for "Ext" you just have "xt"


    Ext.define('Fanx.model.Vendor', { extend: 'Ext.data.Model', config: { fields: [ { name: 'vendorId', type: 'string' }, { name: 'vendorName', type: 'string' }, { name: 'logoURL', type: 'string' } ], associations: [ {type: 'hasMany', model: 'Fanx.model.Food', name: 'foods', associationKey: 'food' } ], proxy: { type: 'ajax', url: '/app/model/data/vendors.json', reader: { type: 'json', rootProperty: 'vendor' } } } }); //down here xt.define('Fanx.model.Food', { extend: 'Ext.data.Model', id: 'foodmenu', config: { fields: [ { name: 'foodItem', type: 'string' }, { name: 'foodPrice', type: 'float' } ] }, belongsTo: 'Fanx.model.Vendor' });

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Location
    Scottsdale, Arizona
    Posts
    7
    Vote Rating
    0
    trondina is on a distinguished road

      0  

    Default


    Micthell:
    I am new to ST and after reading docs and failing at showing the json nested child data (specifically the 'foodItem" and "ItemPrice") in a list located on the tab, i added the associations and multiple models thinking that might work. To be honest, my brain is so convoluted right now trying to figure this simple problem out that i am lost.

    Please help me out. I need "foodItem and "itemPrice" to display in my list that instantiated as an item within a tab of my tabpanel user class.

    To the other gentleman who replied to my post ... yes i do have the "E" in my code, I missed it in my copy and paste.

    PS ... i did catch one thing ... the json file foods array has teh object field defined as itemPrice, but my food model had it defined as foodPrice. I did change that and can now see the data being loaded into a store when I manually look at the data in my console .. Ext.getStore('vendormenu').getData()


    Thanks again for your help in advance

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    1
    Vote Rating
    0
    kpcpkp is on a distinguished road

      0  

    Default


    I noticed a syntax error with variable fooditem in itemTpl. It start with a '[' instead of '{'
    [foodItem}


    itemTpl: [ '<tpl for=".">', '<tpl for="food">', '<div>[foodItem}</div>', '</tpl>', '</tpl>' ]

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi