Utilizing TypeScript to Populate an observableArray in KnockoutJS

Question

Utilizing TypeScript to Populate an observableArray in KnockoutJS

Is there a way to populate an observableArray in KnockoutJS using TypeScript? My ViewModel is defined as a class.

In the absence of TypeScript, I would typically load the data using $.getJSON(); and then map it accordingly.

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);
    });
}

I have attempted to incorporate this data loading process within the constructor of my TypeScript class. However, I am encountering difficulties when attempting to map the JSON data array and store it within the

list_data = ko.observableArray([]);

property. Can anyone provide guidance on how to accomplish this?

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

    list_data = ko.observableArray([]);
}

Thank you for your assistance.

EDIT:

The following is the data received from the server:

[{ "Product": "102289", "ArtworkId": 19431, "IsDownloaded": 1 },
    { "Product": "272203", "ArtworkId": 19423, "IsDownloaded": 1 },
    { "Product": "272222", "ArtworkId": 20306, "IsDownloaded": 1 },
    ...
    { "Product": "862280", "ArtworkId": 19420, "IsDownloaded": 1 }]

javascript json knockout.js typescript

Answer 1

Answer №1

If you were to implement this in TypeScript, it might look something like this:

class Model {
    data = ko.observableArray([]);
    constructor() {

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

This code snippet will compile into the following JavaScript equivalent:

var Model = (function () {
    function Model() {
        var _this = this;
        this.data = ko.observableArray([]);
        $.getJSON('/Home/Get', function (data) {
            var mappedData = $.map(data, function (obj) { return new AnotherClass(obj); });
            _this.data(mappedData);
        });
    }
    return Model;
})();

Answer 2

If you were to implement this in TypeScript, it might look something like this:

class Model {
    data = ko.observableArray([]);
    constructor() {

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

This code snippet will compile into the following JavaScript equivalent:

var Model = (function () {
    function Model() {
        var _this = this;
        this.data = ko.observableArray([]);
        $.getJSON('/Home/Get', function (data) {
            var mappedData = $.map(data, function (obj) { return new AnotherClass(obj); });
            _this.data(mappedData);
        });
    }
    return Model;
})();

Utilizing TypeScript to Populate an observableArray in KnockoutJS

Answer №1

Similar questions

The authService is facing dependency resolution issues with the jwtService, causing a roadblock in the application's functionality

Encountered a NullPointerException while attempting to generate an array from a MySQL database

Looking to optimize the JavaScript code for improved performance speed

Utilize mapping for discriminated union type narrowing instead of switch statements

Trouble accessing onclick function

Leveraging the expand function for pagination through recursive invocations

Retrieve a PHP file utilizing Javascript or JQuery

Having trouble with ESLint in VSCode? The ESLint extension seems to be ignoring linting rules after starting a new project within VSCode

The designated type member is not compatible with LINQ to Entities. Utilizing JSON, KendoUI, and AJAX

Finding Location Information Based on Latitude and Longitude Using Jquery

The switch statement is not functioning properly when the button is pressed

I'm having trouble with the routing of a Node.js REST API built with Express and Mongoose

Obtain a string of characters from different words

Issues arising from using async/await in conjunction with .then() in vue.js login function, causing fetch process not to wait for completion

Is Volley equipped with built-in support for JSON arguments and string responses?

JS-generated elements do not automatically wrap to the next line

Tips for displaying a category name only once if it has already been rendered in a map function

Unable to proceed due to lint errors; after conducting research, the issue still remains

MaterialUI Divider is designed to dynamically adjust based on the screen size. It appears horizontally on small screens and vertically on

Updating a model within an ng-repeat directive from external sources