CODEWITHSUNDEEP
javascriptjsonknockout.jstypescript
shammelburg
shammelburg

Reputation: 7308

KnockoutJS Populate observableArray using TypeScript

How can I populate an observableArray (KnockoutJS) using TypeScript? I have a class as my ViewModel.

Without TypeScript I would load the data using $.getJSON(); and map it.

function ViewModel() {
    var self = this;

    self.list_data = ko.observableArray([]);

    $.getJSON('/Home/Get', function (data) {
        var mapped = $.map(data, function (obj) { return new AClass(obj); });
        self.list_data(mapped);
    });
}

This is my class so far, I am loading the data in the constructor and get the JSON data array. I have tried to map it as well but no luck.

How do I store/map it in the list_data = ko.observableArray([]); in the TypeScript class?

class MyViewModel {
    constructor() {
        $.getJSON('/Home/Get', function (data) {
            alert(data);
        });
    }

    list_data = ko.observableArray([]);
}

Thanks

EDIT:

Here is the data from the server:

[{ "Product": "102289", "ArtworkId": 19431, "IsDownloaded": 1 },
    { "Product": "272203", "ArtworkId": 19423, "IsDownloaded": 1 },
    { "Product": "272222", "ArtworkId": 20306, "IsDownloaded": 1 },
    { "Product": "332245", "ArtworkId": 19430, "IsDownloaded": 1 },
    { "Product": "382277", "ArtworkId": 19424, "IsDownloaded": 0 },
    { "Product": "382256", "ArtworkId": 19425, "IsDownloaded": 1 },
    { "Product": "392272", "ArtworkId": 19416, "IsDownloaded": 1 },
    { "Product": "422242", "ArtworkId": 19422, "IsDownloaded": 1 },
    { "Product": "452295", "ArtworkId": 19414, "IsDownloaded": 0 },
    { "Product": "452219", "ArtworkId": 19421, "IsDownloaded": 0 },
    { "Product": "452214", "ArtworkId": 19413, "IsDownloaded": 0 },
    { "Product": "452223", "ArtworkId": 19415, "IsDownloaded": 1 },
    { "Product": "632204", "ArtworkId": 20051, "IsDownloaded": 1 },
    { "Product": "632238", "ArtworkId": 19432, "IsDownloaded": 1 },
    { "Product": "632295", "ArtworkId": 19419, "IsDownloaded": 1 },
    { "Product": "712220", "ArtworkId": 19417, "IsDownloaded": 1 },
    { "Product": "722240", "ArtworkId": 19433, "IsDownloaded": 1 },
    { "Product": "762258", "ArtworkId": 20273, "IsDownloaded": 0 },
    { "Product": "762278", "ArtworkId": 20274, "IsDownloaded": 1 },
    { "Product": "792297", "ArtworkId": 19418, "IsDownloaded": 1 },
    { "Product": "812202", "ArtworkId": 19429, "IsDownloaded": 0 },
    { "Product": "862280", "ArtworkId": 19420, "IsDownloaded": 1 }]

Upvotes: 1

Views: 1417

Answers (1)

sroes
sroes

Reputation: 15053

This is how it could look like in TypeScript:

class MyViewModel {
    list_data = ko.observableArray([]);
    constructor() {

        $.getJSON('/Home/Get', data => {
            var mapped = $.map(data, obj => new AClass(obj));
            this.list_data(mapped);
        });
    }
}

This will compile into:

var MyViewModel = (function () {
    function MyViewModel() {
        var _this = this;
        this.list_data = ko.observableArray([]);
        $.getJSON('/Home/Get', function (data) {
            var mapped = $.map(data, function (obj) { return new AClass(obj); });
            _this.list_data(mapped);
        });
    }
    return MyViewModel;
})();

Upvotes: 2

Related Questions