How to pass JSON of a post with multiple comments to a view?

[imcl]

I am successfully showing a series of blog posts such as

    {
        "stream": {
            "posts": [{
                "post_id": "1",
                "post_thumb": "pic",
                "post_text": "bla1",
            },
            {
                "post_id": "2",
                "post_thumb": "pic",
                "post_text": "bla2",
            }]
        }
    }

by using this

    Ext.define("MyApp.view.Home", {
        extend: 'Ext.navigation.View',
        xtype:  'homepanel',
    
        requires: [
        	'Ext.dataview.List',
        	'Ext.data.proxy.JsonP',
        	'Ext.data.Store',
        ],
    
        config: {
    		items: {
    
    			xtype: 'list',
    			itemTpl: [
    				'<img src="{post_thumb}" />',
    				'<p>{post_text}</p>'
    			].join(''),
    
    			store: {
    				autoLoad: true,
    				fields: [
    					'post_id',
    					'post_text',
    					'post_thumb'
    				],
    	            proxy: {
    	                type: 'jsonp',
    	                url:  'http://me.com/home/index_app',
    	                reader: {
    	                    type:         'json',
    	                    rootProperty: 'stream'
    	                }
    	            }
    	        }
    		}
        }
    });

When a user taps to view the post he is taken to a panel that shows it. In that panel I'd like to show all comments in that post, but I'm unsure how the JSON should be formed for this.


Would it be something like this? Or does this JSON need a different format?

    {
        "stream": {
            "posts": [{
                "post_id": "1",
                "post_type": "text",
                "post_thumb": "bla1",
                "comment": [{
                    "comment_id": "7",
                    "comment_text": "asd",
                },
                {
                    "comment_id": "8",
                    "comment_text": "sdf",
                }],
            }],
        }
    }

[mitchellsimoens]

That JSON is fine, since you aren't using associations then you can simply use rec.get('comments') to get the comments array.

[imcl]

Thanks Mitchell - I don't seem to be able to loop through the comments though.

I use this controller to show the post and comments on tap:

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',


    config: {
        refs: {
            stream: 'homepanel'
        },
        control: {
            'homepanel list': {
	            itemtap: 'showPost'
            }
        }
    },


    showPost: function(list, index, element, record) {
		this.getStream().push({
	    	xtype: 'panel',
	    	title: record.get('post_author_name'),
	    	html: [
	    		'<img src="' + record.get('post_thumb') + '" />',
	    		'<p>' + record.get('post_text') + '</p>',
	    		'<p><img src="' + record.get('picture') + '" width="30" />' + record.get('post_author_name') + ' posted ' + record.get('timestamp') + '</p>',
	    		'<p>' + record.get('comments') + '</p>'
	    	].join(""),
	    	scrollable: true,
	    	styleHtmlContent: true
		});
   	}
});

but I get this below the post

[object Object],[object Object]  // there are 2 comments in  JSON, BTW

[estesbubba]

Instead of html: you should use tpl: with XTemplate using <tpl for> to loop then feed your record in the data: config.