CODEWITHSUNDEEP
javascriptc#asp.net-mvcknockout-2.0
Gratzy
Gratzy

Reputation: 2908

Creating an observable knockout array from a JSON response

C#/MVC/Knockout/JSON

I've got the following javascript:

function Feed(data) {
    this.ID = ko.observable(data.ID);
    this.RSSName = ko.observable(data.RSSName);
    alert(data.RSSName + " " + data.ID);
}

function ViewModel() {
    self = this;
    self.CurrentFeeds = ko.observableArray([]);
    self.isLoading = ko.observable(false);
    self.StatusMessage = ko.observable("Loading");

    $.ajax({
        type: "GET",
        url: '@Url.Action("RSSList", "RSS")',
        success: function (data) {
            var feeds = $.map(data, function (item) {
                alert(item.RSSName + " " + item.ID + " 1");
                return new Feed(item)
            });
            self.CurrentFeeds(feeds);
            //self.CurrentFeeds(data);

        },
        error: function (err) {
            alert(err.status + " : " + err.statusText);
        }
    });

    self.save = function () {
        self.deleteFeed = function (feed) {
        };
    };
}

The JSON response (as copied from fiddler) looks like this:

{"aaData":[{"ID":"0","RSSName":"Most Recent"},{"ID":"1","RSSName":"Website feed"}]}

Controller:

    public JsonResult RSSList()
    {
        var query = (from t in db.tblRSSFeeds
                     select new ViewModels.RSSList()
                     {
                         ID = t.pkID.ToString(),
                         RSSName = t.szFeedName
                     }).OrderBy( t => t.RSSName).ToList();

        var recent = new ViewModels.RSSList();
        recent.ID = "0";
        recent.RSSName = "Most Recent";
        query.Insert(0, recent);

        return Json(  query, JsonRequestBehavior.AllowGet);
    }

I'm thinking my issue has to do with the Feed(data) function in that it's only passing back one record. I tried setting the self.CurrentFeeds(data) as well with no luck. The "alerts" shown above show undefined but I can see the data coming down from fiddler...

For some reason the success function isn't seeing the data correctly to create the array. Why is this?

Upvotes: 1

Views: 49

Answers (1)

Joel R Michaliszen
Joel R Michaliszen

Reputation: 4222

If it is the response:

{"aaData":[{"ID":"0","RSSName":"Most Recent"},{"ID":"1","RSSName":"Website feed"}]}

Change the success callback to:

$.ajax({
   type: "GET",
   url: '@Url.Action("RSSList", "RSS")',
   success: function (data) {
           var feeds = $.map(data.aaData, function (item) {
           alert(item.RSSName + " " + item.ID + " 1");
           return new Feed(item)
       });
       self.CurrentFeeds(feeds);
   },
   error: function (err) {
       alert(err.status + " : " + err.statusText);
   }
});

And i belive it works, because you are trying to map an object not an array, so you must to get the aaData that is the array to map.

Upvotes: 2

Related Questions