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

Customize the background color of InfoBox in Google Maps API V3 using a dropdown menu

Can arrays be passed as function parameters in CrossRider without the need to convert them into objects first?

Parse the JSON message using the Boost JSON library

Exploring a JSON object's array for a specific attribute with D3

Ordering an array using Typescript within React's useEffect()

Is it possible to compile TypeScript modules directly into native code within the JavaScript data file?

The commitment to Q ensures that errors and exceptions are effectively communicated

Setting a Validator for a custom form control in Angular: A step-by-step guide

I am currently experiencing a problem with deleting documents in Firebase Firestore using React, Typescript, and Redux. Despite the code running, the document continues to exist in

Can someone assist me in understanding the proper syntax for the Node.js function that inserts a document into Watson's Discovery service from the watson-developer-cloud library?

Unable to display images in the ngImgCrop upload preview modal screen

What is the best way to deal with empty arrays during serialization of modified form elements only?

JS/JQuery: Retrieve value from dropdown list or input field

Is there a way to redirect the user directly to the upload page without displaying the response?

Discord.js: Merging strings while pushing to an array

Create a JSON structure with nested elements

The type 'string | AddressInfo' does not include a 'port' property and does not have a string index signature

Is there a way to assign innerHTML values to table cells using PHP?

Parcel React component library throws an error stating that "require is not defined

Using JavaScript to toggle the display of a label element