Consuming external JSON in Sencha Touch XTemplate

Question

I've got my little asp.net mvc app working as expected, however I'm building the JSON incorrectly.

Here's my current way of building a JSON object for consumption within Sencha

        // note: this is using a RAZOR / C# foreach loop to build a JSON string
        var videosToShow = [
        @foreach (Web.Models.VideoListViewModel video in Model){
            @Html.Raw("{ id: " + @video.id + ",")
            @Html.Raw(" title: \"" + @video.title + "\" },")
        }
        ];

Then I have a Sencha Template

        videoTpl = new Ext.XTemplate([
            '<tpl for=".">',
            '<div>',
            '<iframe src="http://player.vimeo.com/video/{id}?title=0&amp;byline=0&amp;portrait=0&amp;color=80ceff&amp;fullscreen=1" ',
            'width="' + screenWidth + '" ',
            'height="' + screenHeight + '" ',
            'frameborder="0">',
            '</iframe>',
            '&nbsp;&nbsp;{title}',
            '</div>',
            '</tpl>'
        ]);

as well as a video panel

        videoPanel = new Ext.Panel({
            title: "Videos",
            tpl: videoTpl,
            iconCls: "tv",
            dockedItems: [{ xtype: "toolbar", title: "Videos"}],
            scroll: "vertical"
        });

and my root TabPanel

        rootPanel = new Ext.TabPanel({
            fullscreen: true,
            layout: 'card',
            region: 'center',
            items: [videoPanel, biblePanel, aboutPanel, helpPanel, morePanel],
            tabBar: { dock: 'bottom' }
        });

        videoPanel.update(videosToShow);

The bottom line here is that the above works just fine. I just don't like the internal JSON string, I'd much rather send the JSON from a URL.

It's probably something simple that I'm missing, but any influence will be greatly appreciated.

score 0 · Accepted Answer · edited Jun 02 '11 at 18:37

0

Do it like this:

var videosToShow = @Html.Raw(Json.Encode(Model));

or of course if your model has many properties and you wanted only id and title:

var videosToShow = @Html.Raw(Json.Encode(Model.Select(x => new { x.id, x.title })));

It will be better/easier/shorter/safer/avoids spaghetti code/no loops/working.

EDIT Answer found in the comments.

edited Jun 02 '11 at 18:37

Chase Florell

46,378
57
186
376

answered Jun 02 '11 at 17:24

Darin Dimitrov

1,023,142
271
3,287
2,928

but this still drops the JSON in my page rather than being consumed from the external url. – Chase Florell Jun 02 '11 at 17:28
@rockinthesixstring, what do you mean by *consumed from the external url*? – Darin Dimitrov Jun 02 '11 at 17:29
the code above builds a JSON string from the model directly in the view. What I need to do is build a service that sends the JSON from the controller and somehow use `$GetJSON` to populate the template. – Chase Florell Jun 02 '11 at 17:36
@rockinthesixstring, well in this case can't you simply have a controller action which instead of returning a view would `return Json(someModelInstance, JsonRequestBehavior.AllowGet);` and then consume it with `$.getJSON()`? – Darin Dimitrov Jun 02 '11 at 17:37
yep. I've already got the controller returning JSON. That's not the issue. I just have really crappy JS chops. I can't figure out how to store the JSON in the `videosToShow` variable. – Chase Florell Jun 02 '11 at 17:38
@rockinthesixstring, my answer illustrates exactly this => how to store your model into a javascript variable by properly encoding it. Another possibility is to have your controller action return directly javascript. Look at the [following answer](http://stackoverflow.com/questions/6217028/share-constants-between-c-and-javascript-in-mvc-razor/6217109#6217109) I gave earlier for hints. – Darin Dimitrov Jun 02 '11 at 17:41
I don't want to use a model. My WebService will not be running the Sencha app. In fact, the sencha web app will be running on a completely different server. The only communication they will be able to have between one another is via JSON. IE: the controller will never ever send the model to the view. – Chase Florell Jun 02 '11 at 17:44
@ockinthesixstring, so I guess you will have to use `$.getJSON` to fetch the remote JSON data. – Darin Dimitrov Jun 02 '11 at 17:45
Your answer works great to replace my foreach loop in favor in Json.Encode. The problem is that I don't want the JSON in the markup at all. – Chase Florell Jun 02 '11 at 17:46
@rockinthesixstring, OK, I got that => $.getJSON then. – Darin Dimitrov Jun 02 '11 at 17:46
ah, yep. it's the ASS theory (Always something simple) - I was using `$getJSON` – Chase Florell Jun 02 '11 at 18:03

Consuming external JSON in Sencha Touch XTemplate

1 Answers1