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
    37,549
    Vote Rating
    873
    Answers
    3567
    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
    Vote Rating
    0
    Answers
    1
    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>' ]