I'm working for the first time on an outsourced app that was built with Knockout (using v2.1.0).
I can't seem to get a fetched json object into my viewmodel, though the data is being retrieved. The code I'm working with is quite large (this particular viewmodel file I'm working within is nearly 1,700 lines). Here's a stripped down version of the code:
var ViewModel = function(){
var self = this;
//a ton of other self.observables...
//this is the part I'm trying to update with a new enhancedTiers (array of objects)
self.medical = {
//a bunch of other self.observables...
enhancedTiers: ko.observableArray([])
},
//more self.observables...
//down to the ajax success callback I'm working within
success: function(data, textStatus, jqXHR) {
...
switch (self.currentService()) {
case "medical" :
with (self.medical) {
//we set the existing observable data here...
//trying to set the NEW data
enhancedTiers(data.enhancedTiers);
console.log('***************************');
console.log(data.enhancedTiers);
console.log(data.enhancedTiers[0].name);
console.log(data.enhancedTiers[0].summaryBean.familyDedMet);
console.log('***************************');
//all these log out the correct data
}
}
...
}
In my html, I'm doing the following just to see if I can get some of the data to output:
<span data-bind="text: medical.enhancedTiers()[0].name"></span>
I get the following error:
Uncaught Error: Unable to parse bindings.
Message: TypeError: Cannot read property 'name' of undefined;
Bindings value: text: medical.enhancedTiers()[0].name
If I change the html to this:
<span data-bind="text: medical.enhancedTiers()[0]"></span>
The UI renders [object Object].
I've tried using the mapping plugin as well, but couldn't get that working, either.
I obviously have the data from the json response, I can't seem to get it in the viewmodel, however. Anyone have any advice on how to get my returned json object of arrays into my viewmodel?
If I hard code the enhancedTiers json into my viewmodel, I have no issues binding the UI to that data, I just can't seem to get my data into the viewmodel.
It's because the view is being rendered before you've populated the observableArray, so at the time, those fields don't exist. You'd have to put in a check to your binding, like:
<span data-bind="text: medical.enhancedTiers().length > 0 ? medical.enhancedTiers()[0].name : ''"></span>