Observables in Knockout.js vanish after being bound

I'm encountering a peculiar issue with my Knockout script. Here is the viewModel:

viewModel = {
    viewShown: function () {
        if (params.id !== undefined)
            timer = setInterval(loadVorgangsdetails, 100);
        else {
            $('#content').hide();
            viewModel.title('Fehler: Parameter Auftrag-ID wurde nicht definiert. Abbruch!');
            console.error('Parameter Auftrag-ID wurde nicht definiert', params.id);
            viewModel.isLoading(false);
        }
    },
    title: ko.observable('Vorgangsdetails für ' + params.id),
    isLoading: ko.observable(true),
    vorgangNr: ko.observable(params.id),
    aufträge: ko.observable(),
    kommission: ko.observable(),
    kommissionAlternativ: ko.observable(),
    kunde: ko.observable(),
    verlauf: ko.observable(),
};

Once data is bound to aufträge, all subsequent bindings become undefined. This results in viewModel.kommission returning "undefined" instead of function() {…} when checked in the F12 debugger.

function loadVorgangsdetails() {
if (myHub !== undefined && myHub.connection.state === 1) {
    clearInterval(timer);
    myHub.server.getOrderDetails(viewModel.vorgangNr()).done(function (param) {
        console.log(param);
        viewModel.aufträge(param.Aufträge);
        viewModel.kommission(param.Kommission);
        viewModel.kommissionAlternativ(param.KommissionAlternativ);
        viewModel.kunde(param.Kunde);
        viewModel.verlauf(param.Verlauf);
        viewModel.isLoading(false);
    }).fail(function (params) {
        $('#content').hide();
        viewModel.title('Fehler: Der Dienst konnte die angeforderten Daten nicht bereitstellen.');
        console.error('Parameter Auftrag-ID wurde nicht definiert', params);
        viewModel.isLoading(false);
    });
} else
    console.info('Warte auf Server …');
}

Here is the data from param:

{"VorgangskopfID":3621295,"Gebiet":12...

What could be causing this issue with viewModel.aufträge(param.Aufträge)? If I remove that line, everything functions correctly (although the data remains empty).

Thank you for your assistance!

Kind regards

Answer №1

The reason for this issue might be that you are using

viewModel.aufträge(param.Aufträge)
when the property on params is actually spelled as "aufträge", with a lowercase "a".

Answer №2

I've identified the issue! The data I am working with is sourced from a SignalR server. Initially, I used a Dictionary(Of Int32, Werkstück) on the server side, but it seems that Knockout was unable to handle it correctly. To resolve this, I switched to List(Of Werkstück), and now everything is functioning as expected.

Below is the JSON snippet that didn't function properly. The updated version no longer includes index numbers but instead consists of a straightforward array of Werkstück objects.

"Werkstücke":{  
    "1":{  
        "Position":1,
        "BdeDetails":[  
            {  
                "Machine_Id":810400,
                "Loading":0,
                "Employee":0,
                "Status":1,
                "StartTime":"0001-01-01T00:00:00",
                "EndTime":"0001-01-01T00:00:00",
                "Minutes_Processed":0,
                "Minutes_Estimated":4.3
            },
            {  
                "Machine_Id":830100,
                "Loading":0,
                "Employee":0,
                "Status":4,
                "StartTime":"2015-10-23T11:31:36.52",
                "EndTime":"2015-10-23T11:33:38.17",
                "Minutes_Processed":2,
                "Minutes_Estimated":1.3
            },
           ...
⋮

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Customize the number of items displayed per page with Bootstrap Vue's perPage

I am currently working on a Vue project which you can view on codesandbox and utilizing bootstrap-vue. Within the project, there are multiple columns containing cards along with pagination: <template> <b-container> <b-row :cu ...

Transform JSON data into a Java object with a modified format

I need to convert a JSON string representing an object into a Java object B with a different structure. My current approach involves creating a Java Object A that mirrors the JSON structure, using Jackson for JSON to A conversion, and Dozer with XML mappin ...

What is the best method for transforming a JSON string into a JSON object?

I have a method that takes a JSON string, and I want to convert the JSON string into a JSON object. I attempted the method below but encountered an error message indicating memory out of bounds. How can I resolve this error? I successfully tried passing ...

Storing JSON data in a concealed field and extracting it for use in a function

I have a function that retrieves the number of rows from a database table using JSON in my application. function getRowCount() { $.ajax({ headers: { 'Accept': 'application/json', 'Conte ...

How to incorporate a custom JavaScript file into an Angular 7 application

Suppose there is a JavaScript file named mylib.js in an angular 7 application, located at assets/mylib.js: mylib = function(){ return { hi: function() { alert('hi'); } }; }(); If I want to be able to call mylib.hi() in my hero-f ...

"Learn how to deactivate the submit button while the form is being processed and reactivate it once the process is

I have been searching for solutions to this issue, but none seem to address my specific concern. Here is the HTML in question: <form action=".."> <input type="submit" value="download" /> </form> After submitting the form, it takes a ...

Retry an Ajax request immediately after a timeout without having to wait for the full

I am attempting to resend an AJAX request every 5 seconds if there is an issue, but when I simulate an offline connection with Chrome, the AJAX request doesn't wait 5 seconds between each attempt and keeps getting called continuously. What could be c ...

Updating the JSON data with a new row

I am trying to dynamically add a new row to my JSON data when the user clicks on a link. Despite not receiving any errors, I am unable to see the updated JSON in my alert message. $(document).ready( function(){ people = { "COLUMNS":["NAME","AGE"], ...

Sending a property as a parameter to a different component through Vue's router-link

I have a component designed to showcase recipes in a list format. Each recipe is rendered using a separate component from an array of recipes. I am currently attempting to pass the recipe object from one component to another component using Router-Link ...

Why isn't it working if this.setState is not available?

Hey there, I'm having some trouble with my this.setState function in React. It works fine in other files but not here, even though the code is identical. Can anyone help me figure out why? test(event){ event.preventDefault(); var regex_mongoinclude = ...

The digest string for the crypto.pbkdf2Sync function is malfunctioning

I've been working on revamping the authentication system for an old application that previously ran on node 4.5, but I keep encountering an error whenever I attempt to log in. TypeError [ERR_INVALID_ARG_TYPE]: The "digest" argument must be one of type ...

Configuring React classes for compilation within Play

After incorporating a basic React class into my Play project at /app/assets/js: var Question = React.createClass({ render: function() { return (<div> <p>{this.props.content}</p> <br> <p>{this.props.an ...

Is it feasible to convert a Google Drive spreadsheet into JSON format without needing the consent screen?

I'm working on incorporating a JSON feed directly from a private spreadsheet (accessible only via link) onto my website. In order to do this, I must create a new auth token using OAuth 2.0, which is not an issue. However, the Google Sheets API v4 mand ...

Testing in Jasmine: Verifying if ngModelChange triggers the function or not

While running unit tests for my Angular app, I encountered an issue with spying on a function that is called upon ngModelChange. I am testing the logic inside this function but my test fails to spy on whether it has been called or not! component.spec.js ...

Using Ajax to implement a content slider with lightSlider

Seeking assistance in developing a dynamic content slider utilizing the LightSlider plugin. Currently, I have a script that fetches content from a database table (outputting JSON to HTML) and displays 6 div's of content per slide. However, I aim to di ...

What is the best way to send a React prop that is buried deep within a JSON structure?

Currently, I am in the process of creating a product table to showcase items for a store. The headers of this table include: id, title, imagePath, newPrice, oldPrice. To accomplish this, I have developed an ItemTable component within my React application t ...

Utilizing dynamic class and color binding features in VueJs?

I need help with implementing a Custom Sort method on my divs to arrange them in ascending or descending order. My query is how can I pre-set the icon color to grey by default, and only change it to black when clicked, while keeping the others greyed out a ...

Populate a form with database information to pre-fill the fields

So I have this web form built with HTML, and there are certain values within the form that can be changed by the user. To ensure these changes are saved, I'm storing them in a database. My goal is to have the form automatically filled with the data fr ...

Utilize CountUp.js to generate a dynamic timer for tracking days and hours

I am looking to create a unique counter similar to the one featured on this website https://inorganik.github.io/countUp.js/ that counts up to a specific number representing hours. My goal is to display it in a format such as 3d13h, indicating days and hour ...

Having trouble loading the DOM element within the child component

An issue has arisen with Angular 4.4.6 regarding the access of a DOM element by ID from a different component. Within my component, I aim to display a Google Maps for specific purposes. Following the examples given in the API, I include the following code ...