CODEWITHSUNDEEP
javascriptjsonknockout.js
user517406
user517406

Reputation: 13763

Converting Knockout js json to observable

I am struggling to return JSON data and convert it into an observable. The data is returned fine in JSON format, but it doesn't seem to be assigned to the observable. Can anybody help? I am guessing the issue is in the success part of the ajax call :

<script type="text/javascript">

function StandingsViewModel() {
    var self = this;

    self.standings = ko.observableArray();

    self.DivisionName = ko.observable('');

    self.afceast = ko.computed(function () {

        return ko.utils.arrayFilter(self.standings(), function (i) {
            return "AFC East" == i.DivisionName;
        });
    });

    self.afccentral = ko.computed(function () {

        return ko.utils.arrayFilter(self.standings(), function (i) {
            return "AFC Central" == i.DivisionName;
        });
    });

    self.afcwest = ko.computed(function () {

        return ko.utils.arrayFilter(self.standings(), function (i) {
            return "AFC West" == i.DivisionName;
        });
    });

    self.nfceast = ko.computed(function () {

        return ko.utils.arrayFilter(self.standings(), function (i) {
            return "NFC East" == i.DivisionName;
        });
    });

    self.nfccentral = ko.computed(function () {

        return ko.utils.arrayFilter(self.standings(), function (i) {
            return "NFC Central" == i.DivisionName;
        });
    });

    self.nfcwest = ko.computed(function () {

        return ko.utils.arrayFilter(self.standings(), function (i) {
            return "NFC West" == i.DivisionName;
        });
    });

    $.ajax({
        dataType: "json",
        url: "/api/standing/GetStandingsBySeason/2018",
        beforeSend: function (xhr) {
            $('#divStandings').html('');
            $('#divStandings').addClass('ajaxRefreshing');
            xhr.setRequestHeader('X-Client', 'jQuery');
        },
        success: function (result) {
            $('#divStandings').removeClass('ajaxRefreshing');
            self.standings(JSON.parse(result));
        }
    });
}

$(document).ready(function () {
    ko.applyBindings(new StandingsViewModel());
});

</script>

Upvotes: 5

Views: 18814

Answers (2)

Alerty
Alerty

Reputation: 5945

An alternative option to using the mapping plugin for Knockout would be to use Knockback. It is a bridge between Knockout and Backbone.

You easily get your data like so:

//Model
var StandingsModel = Backbone.Collection.extend({ 
    url:'/api/standing/GetStandingsBySeason/2018' 
});

//View model
var StandingsViewModel = function (standings) {
    this.standings = kb.collectionObservable(standings)
    //...
};

$(document).ready(function () {
    //Get data from server
    var model = new StandingsModel();
    model.fetch( function() {
        success: //...
    });

    //Apply bindings
    ko.applyBindings(new StandingsViewModel(model));
});

Upvotes: 1

Sławomir Rosiek
Sławomir Rosiek

Reputation: 4073

You should use Knockout Mapping plugin and map your result to observable.

var observableData = ko.mapping.fromJS(result);

or if your object wasn't parsed automatically by jQuery

var observableData = ko.mapping.fromJSON(result);

If your data type is array it will be converter to observableArray, so to get it items as normal array you should get like from any other observable by adding brackets;

var array = observableData();

That array can by assigned to your obsevableArray in that way:

self.standings(array);

Upvotes: 13

Related Questions