Home:ALL Converter>Unable to display nested JSON on Sencha Touch 2

Unable to display nested JSON on Sencha Touch 2

Ask Time:2012-09-23T00:04:54         Author:pepe

Json Formatter

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: [
        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.


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 

            xtype: 'panel',
            html: [
                '<p>' + record.get('post_thumb') + '</p>',
                '<p>' + record.get('comments') + '</p>',
                comments     // added to output HTML
            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"?)

Author:pepe,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/12545387/unable-to-display-nested-json-on-sencha-touch-2
sra :

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.\n\nWhy 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)\n\nvar data = record.get('comments')\nfunction(data) {\n var result = '',\n len = data.length,\n i=0;\n\n for(;i<len;i++) {\n result += data[i]['comment_text'] +'<br />'\n }\n\n return result;\n}\n\n\nHere 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.\n\nshowPost: function(list, index, element, record) {\n var data = record.get('comments');\n\n function fetchComments(data) {\n var result = '',\n len = data.length,\n i = 0;\n\n for(;i<len;i++) {\n result += data[i]['comment_text'] + '<br />';\n }\n\n return result;\n }\n\n this.getStream().push({\n xtype: 'panel',\n html: [\n '<p>' + record.get('post_thumb') + '</p>',\n '<p>' + fetchComments(data) + '</p>'\n ].join(''),\n scrollable: true,\n styleHtmlContent: true,\n });\n }\n",