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

Cross-origin resource sharing (CORS) policy issue arises when the 'Access-Control-Allow-Origin' header is not included in the requested resource, especially when utilizing an iframe in a React

I am trying to link a website to a button using an iframe. This website allows access to all domain names. Below is the code for my button: <Button component={NavLink} activeClassName={classes.activeBtn} to="/searchEngine&qu ...

Calculate the length of a JSON array by using the value of one of its

What is the most efficient way to obtain the length of a JSON array in jQuery, based on the value of its attribute? As an illustration, consider the following array: var arr = [{ "name":"amit", "online":true },{ "name":"rohit", "online":f ...

Tips on saving soup to .html with Beautiful Soup

I am currently extracting content from a website link and I am looking to save the entire webpage as an .html file locally. Is there a way for me to directly output the soup to an html file so that I can then upload a copy to S3-AWS? from bs4 import Beaut ...

Maintaining microsecond accuracy when transferring datetime values between Django and JavaScript

It appears that django, or the sqlite database, is saving datetimes with microsecond precision. However, when it comes to transferring a time to javascript, the Date object only works with milliseconds: var stringFromDjango = "2015-08-01 01:24:58.520124+1 ...

What could be causing my PUT and DELETE requests to return a 404 status code?

I have encountered a problem with my MEN back-end app. In the express client router, I declared PUT and DELETE requests but they are returning a status 404 not found error. However, the POST request is functioning correctly. Could this ...

Troubleshooting a sidekiq_mailer issue while attempting to send an email

After incorporating the gems sidekiq (2.15.0) and sidekiq_mailer (0.0.6) into my app, I encountered an issue when attempting to send an email. The error message displayed was: NoMethodError (undefined method `key?' for #<JSON::Ext::Generator::Stat ...

Difficulty in sharing cookies among subdomains

I have successfully stored my visitors' style sheet preference in a cookie, but I am facing an issue with sharing the cookie across subdomains. Even after specifying the domain, the cookie does not seem to be shared. What could be causing this proble ...

Monitoring Twitter bootstrap modal for scrollbar reaching the bottom

Currently, I am working with Twitter Bootstrap modal and facing a challenge in determining how to detect when the scrollbar of the modal reaches the bottom using either JavaScript or jQuery. https://i.stack.imgur.com/0VkqY.png My current approach involve ...

Learn the process of uploading a default file with C# in ASP.NET

Is there a way to upload a default file from the client side without having to use the browse button in the file upload control? For example, I want to upload a specific file every time I click a button, without showing the file dialog. Can this be achie ...

What is the process for retrieving data from a Lotus view and converting the results to a JSON format?

I created a 'walking' view that I need to query: http://site/activity.nsf/walking?searchview&query=FIELD%20Gradient%20CONTAINS%20gradienteasy.gif When the results are retrieved, they are displayed in an HTML table. However, I would like to ...

Lack of intellisense support for .ts files in Visual Studio Code

Currently, I am using Visual Studio Code 1.17.2 on Arch Linux to kickstart my work with Node.js/Angular4. To avoid confusion caused by loosely typed code, I have decided to switch to TypeScript for my NodeJS server as well. This is why my main file is name ...

Can you explain the functionality of this JavaScript registration code?

I am working on an ajax/jquery 1.3.2 based sign up form and I am looking to gain a deeper understanding of how to incorporate jquery into my projects by analyzing the code line by line. Could someone provide a detailed explanation of this code and break d ...

Arranging buttons that are generated dynamically in a vertical alignment

Currently, I am in the process of creating a webpage for various items, and everything is going well so far. However, I have encountered an issue while attempting to vertically align the buttons that I am generating using JavaScript within the document. I ...

The jQuery keyup event initiates multiple times, increasing exponentially with each trigger

I recently added a search bar with auto-complete functionality to my website. The search bar queries the database for elements that begin with the text entered by the user as they type. Although it works well, I noticed that every time the user inputs ano ...

Use the zoom feature on D3 to enhance two graphs in an HTML document

I have been experimenting with d3 libraries lately and came across http://bl.ocks.org/jroetman/9b4c0599a4996edef0ab. I successfully used it to draw a graph based on data from a tsv file and enable zoom in and out functionality, which worked well for me. Ho ...

"Can you explain the functioning of this Node.js middleware when it doesn't require any

Currently, I am utilizing a function created by another individual for express and passport, which defines the middleware in the following manner: function isLoggedIn(req, res, next) { if (req.isAuthenticated()){ return next(); } els ...

Creating a response in Node JS

I'm struggling with crafting a response to the server. Currently, I have a login form that sends data to the server. On the backend, I verify if this data matches the information in a .json file and aim to send a response upon successful validation. ...

Building an npm module locally: A step-by-step guide

Imagine I'm in the process of working on an application called MyApp and I want to create an NPM module for it, named MyModule. Currently, I can think of two approaches to developing it: Make changes -> save -> npm install /path/to/module in M ...

Update the span's content according to the user's input

Is it possible to update the value of a span to match that of an input field in HTML? HTML: <p style='font-size:150%'> Hey friend, I am <span id='name_display'>Anonymous</span>, I'd like to invite you to..... &l ...

What is the speed difference between calling functions from require's cache in Node.js and functions in the global scope?

Let's imagine a scenario where we have two files: external.js and main.js. // external.js //create a print function that is accessible globally module.exports.print = function(text) { console.log(text) } Now let's take a look at main.js: ...