Difficulty Converting Array of Objects to Proper Type with Q.Promise and KO.mapping

Question

Difficulty Converting Array of Objects to Proper Type with Q.Promise and KO.mapping

I have encountered an issue while trying to filter an observable array. It seems that the ko.utils.arrayFilter method is converting all my model's field names to lowercase, causing unexpected behavior. I should mention that this project involves Typescript.

Here is a snippet of my Model:

    export class MyListModel {
    constructor(jsObject?: {}) {
        if (jsObject) {
            ko.mapping.fromJS(jsObject, {}, this);
        }
    }
    Text = ko.observable<string>();
    Value = ko.observable<string>();
}

Within my viewModel, I have defined the following field:

  inches = ko.observableArray<Models.MyListModel>([]);

At another part of the program, I utilize the filterInches() method to filter the array based on certain criteria. The 'value' parameter represents the currently selected value from a dropdown.

    filterInches(value) {

        if (value == 6) {
            var filtered = ko.utils.arrayFilter(this.inches(),
                function (item) {

                    if (parseInt(item.Text()) <= 8)
                        return true;
                });

            this.filteredInches(filtered);
        } else {
            this.filteredInches(this.inches());
        }
    }

While there are no compile errors, running the application in the browser triggers an error stating "item.Text is not a function". Upon inspection in Chrome, it appears that 'item' has been transformed into an anonymous object with fields being converted to lowercase. This transformation might be causing the issues I am facing. What could be the reason behind this change?

EDIT: Delving into a related section of the code, I suspect a potential explanation for its malfunction. It seems tied to the Q Promise library, although comprehending this library fully remains challenging (despite reading the documentation). I believe the developers who authored this code might have misconceptions about its functionality.

To verify any discrepancies, I attempted modifying the property names within our model:

    export class MyListModel {
constructor(jsObject?: {}) {
    if (jsObject) {
        ko.mapping.fromJS(jsObject, {}, this);
    }
}
  Cat = ko.observable<string>();
  Chicken = ko.observable<string>();
}

Upon revisiting the revised filterInches() method, it can be observed that 'item.Cat' functions during compilation, but 'Cat' is undefined when scrutinizing through Chrome's debugging tool. Surprisingly, the properties belonging to 'item' remain as 'text' and 'value':

    filterInches(value) {

    if (value == 6) {
        var filtered = ko.utils.arrayFilter(this.inches(),
            function (item) {

                if (parseInt(item.Cat()) <= 8)
                    return true;
            });

        this.filteredInches(filtered);
    } else {
        this.filteredInches(this.inches());
    }
}

This anomaly suggests that the JSON objects fetched are not properly mapped to instances of MyListModel. Nevertheless, I presume the issue does not lie within the MyListModel itself.

The disruption seemingly emerges from the segment responsible for obtaining the 'inches' initially:

    refreshInches() {
        this.DataService.getInches().done(entities => {
            this.inches(entities);
        });
    }

Subsequently, the getInches() method presents itself as:

    getInches(): Q.Promise<Array<Models.MyListModel>> {
        return Q($.getJSON(this._baseUrl + 'GetInches'));
    }

It seems like the original intention was to retrieve inch-related data asynchronously from an endpoint and convert the JSON information into MyListModel objects. Frankly, I lack sufficient knowledge regarding Q.Promise to pinpoint probable flaws within the getInches() routine. Nonetheless, it's discernible that the method currently returns an array populated by unnamed objects sourced from JSON data.

To offer context, the JSON payloads acquired from the endpoint adhere to this structure:

[{"text":"0","value":"0"},{"text":"1","value":"1"},...]

Can someone provide insights on enhancing the getInches() method to align with its intended functionality?

javascript arrays knockout.js typescript q

Answer 1

Answer №1

Based on the code provided, the function getInches should return a

Q.Promise<Array<Models.MyListModel>>

, which means it should be a promise for an array of MyListModel objects.

However, the current implementation does not match this expectation:

getInches(): Q.Promise<Array<Models.MyListModel>> {
    return Q($.getJSON(this._baseUrl + 'GetInches'));
}

Instead of returning the expected type, the above snippet returns a promise for

<whatever the server gives you>

, which seems to be an array of plain objects in this case.

To align it with the intended type, we could modify it as follows:

getInches(): Q.Promise<Array<Models.MyListModel>> {
    var jqXhr = $.getJSON(this._baseUrl + 'GetInches');

    return Q(jqXhr).then(data => {
        return data.map(item => {
            return new Models.MyListModel(item);
        });
    });

    // or, alternatively
    return Q(jqXhr).then(data => data.map(item => new Models.MyListModel(item)));
}

After making these changes, we can save the newly created MyListModel instances in an observable:

refreshInches() {
    this.DataService.getInches().done(this.inches);
}

It's worth noting that this.inches is an observable, and observables are functions, allowing us to use them directly as callbacks.

A promise handler function receives the promised value as its first argument. Observables store the value passed to them as arguments, making them a suitable choice here.

In addition, your approach to filteredInches appears overly complex. Instead of defining it as a standalone function, consider making it a computed property that depends on an observable in your viewmodel. This ensures consistency throughout.

this.filteredInches = ko.pureComputed(() => {
    var value = this.value();

    return ko.utils.arrayFilter(this.inches(), item => {
        return value != 6 || +item.Text() <= 8;
    });
});

Upon reviewing your viewmodel setup, it may be beneficial to have a numeric observable (or computed) available to avoid manual type conversion when utilizing the Text property in calculations.

Answer 2

Based on the code provided, the function getInches should return a

Q.Promise<Array<Models.MyListModel>>

, which means it should be a promise for an array of MyListModel objects.

However, the current implementation does not match this expectation:

getInches(): Q.Promise<Array<Models.MyListModel>> {
    return Q($.getJSON(this._baseUrl + 'GetInches'));
}

Instead of returning the expected type, the above snippet returns a promise for

<whatever the server gives you>

, which seems to be an array of plain objects in this case.

To align it with the intended type, we could modify it as follows:

getInches(): Q.Promise<Array<Models.MyListModel>> {
    var jqXhr = $.getJSON(this._baseUrl + 'GetInches');

    return Q(jqXhr).then(data => {
        return data.map(item => {
            return new Models.MyListModel(item);
        });
    });

    // or, alternatively
    return Q(jqXhr).then(data => data.map(item => new Models.MyListModel(item)));
}

After making these changes, we can save the newly created MyListModel instances in an observable:

refreshInches() {
    this.DataService.getInches().done(this.inches);
}

It's worth noting that this.inches is an observable, and observables are functions, allowing us to use them directly as callbacks.

A promise handler function receives the promised value as its first argument. Observables store the value passed to them as arguments, making them a suitable choice here.

In addition, your approach to filteredInches appears overly complex. Instead of defining it as a standalone function, consider making it a computed property that depends on an observable in your viewmodel. This ensures consistency throughout.

this.filteredInches = ko.pureComputed(() => {
    var value = this.value();

    return ko.utils.arrayFilter(this.inches(), item => {
        return value != 6 || +item.Text() <= 8;
    });
});

Upon reviewing your viewmodel setup, it may be beneficial to have a numeric observable (or computed) available to avoid manual type conversion when utilizing the Text property in calculations.

Difficulty Converting Array of Objects to Proper Type with Q.Promise and KO.mapping

Answer №1

Similar questions

Terminate the loop in a bash script if a certain condition is met

Unable to modify existing attributes in a sails.js model

Retrieving the 'red' pixel data from the texture rendered with gl.texImage2D

Can a variable be declared within the path references of the Firebase database?

Struggling with implementing jquery Ajax and a php script to fetch information from a mysql database

Deleting JSON files using Discord and Node.js by requiring them from a specific folder

What is the best way to display a Base64 image in a server-side DataTable?

Unintentional GET request triggered by Axios baseURL

The steps for removing a Laravel session array

Angular.js and D3 - The Perfect Combination for Dynamic Data Visualization!

Problems with installing ambient typings

Retrieving JSON data from $routeParams in AngularJS

Why does the text in a div display in Safari 8.2 and Chrome 39, but not in Firefox 34?

Boost Google Pagespeed score by reducing 'Total Blocking Time' in NextJs

Error: Cannot access 'addEventListener' property of null in Chrome Extension due to TypeError

The transparency level of materials in THREE.js

Unexpectedly, the child component within the modal in React Native has been resetting to its default state

Encountering issues with utilizing global variables in Ionic 3

Just starting out with TypeScript and running into the error: "Cannot assign type 'null' to type 'User[]'"

I encountered an issue stating, "The function `req.redirect` is not recognized."