Unable to display nested JSON on Sencha Touch 2

Question

Consider this JSON

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

and my Model

Ext.define('MyAppApp.model.Post', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            'post_id',
            'post_type',
            'post_thumb',
            'comments',
        ],
        proxy: {
            type: 'jsonp',
            url:  'http://MyApp.com/home/index_app',
            reader: {
                type:         'json',
                rootProperty: 'stream'
            }
        }
    }
});

The above correctly shows a list of posts in my view. I added a controller to push a panel to show the full content of each post, which is working.

Controller

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

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

    showPost: function(list, index, element, record) {

/////// begin code block that solved my problem

    var data     = record.get('comments');
    var comments = '';

    Ext.Array.each(data, function(item) {
        comments += [item.comment_text] + '<br />';
    });

/////// end 

        this.getStream().push({
            xtype: 'panel',
            html: [
                '<p>' + record.get('post_thumb') + '</p>',
                '<p>' + record.get('comments') + '</p>',
                comments     // added to output HTML
            ].join(''),
            scrollable: true,
            styleHtmlContent: true,
        });
    }
});

My trouble is with retrieving the data from comments, which are nested in the JSON.

With the above controller, I get

[object Object],[object Object]

in my view and in the console I can open those objects and see the entirety of my comments.

But how do I display them in the view? (eg, how do I display "comment_text"?)

Answer 1

Here is the other way I have iterated.

Json data:

{
    "account" : [
        {
            "id": "1",
            "accNo" : "5869785254",
            "curAmt" : "25000",
            "balAmt" : "15000",
            "transdate" : [
                {
                    "date" : "10",
                    "month" : "03",
                    "description" : "Check 232",
                    "crddbt" : "-1200"
                },
                {
                    "date" : "14",
                    "month" : "03",
                    "description" : "ATM Withdrawl",
                    "crddbt" : "-500"
                }
            ],
        }
    ]
}

Sencha Code to iterate on transdate object.

var transDateObj = record.get('transdate');

Ext.Object.each(transDateObj, function(key, value, myself){

            Ext.Object.each(value, function(key, value, myself){
                console.log(key + ":" + value);
            });
        });

Answer 2

Well, they are no longer JSON as soon as they are in your model, they got deserialized to object. To display them you should use a XTemplate. If you already use a template within your view you can directly access the properties of the objects to to render them. Let me know if anything is still unclear.

Why exactly do you render the content by yourself into html property? Is that cause of performance reasons? I am not that used to ST, therefore I ask. Anyway, build up a little helper function that will loop through the comment array and return is as more or less formatted string (this will be up to you, also the check that the array is at least a empty one and never null)

var data = record.get('comments')
function(data) {
    var result = '',
        len = data.length,
        i=0;

    for(;i<len;i++) {
        result += data[i]['comment_text'] +'<br />'
    }

    return result;
}

Here is a implementation into the origin function. I post this cause the use of Ext.Array.each is not recommend, because it executes a function for each element and functioncalls within loops should be spared.

showPost: function(list, index, element, record) {
        var data     = record.get('comments');

        function fetchComments(data) {
            var result = '',
                len = data.length,
                i = 0;

            for(;i<len;i++) {
                result += data[i]['comment_text'] + '<br />';
            }

            return result;
        }

        this.getStream().push({
            xtype: 'panel',
            html: [
                '<p>' + record.get('post_thumb') + '</p>',
                '<p>' + fetchComments(data) + '</p>'
            ].join(''),
            scrollable: true,
            styleHtmlContent: true,
        });
    }