Add object to ObservableArray

Question

I have an data object which is dynamic as it was read from a WebApi Load Data call... and then converted into an observable using:

 $.get("/api/PlateTemplate/Get", { id: self.TemplateId() }).done(function (data) {
            ko.mapping.fromJS(data, {}, self.Data);  
            self.IsDataLoaded(true);
        });

One of the fields is an observable array of another object type. I use this to render some tabs on my UI.

<div id="plateTemplate" data-bind="with: Data">
<ul class="nav nav-tabs" data-bind="foreach: PlateTemplateGroups">
                <li data-bind="css: {active: $index()==0}"><a data-toggle="tab" data-bind="attr: {href: ('#tabId' + $index())}"><span data-bind="text: Description"></span></a></li>
</ul>

This works. All good. I have a button which I would like to use to add a new tabl. I allow the user to type in a name, and then click the button. I want to add a new tab. So, I attempt to add a new item to my Data object:

But first, to check that my tab group is 'observed', I just hardcode a name change to the first tab:

self.Data().PlateTemplateGroups()[0].Description("hahahaha");

And as that executes, the first tabs display name changes. Also, when I post my self.Data() back to my controller, the changes are reflected.

Then I try to add a new item:

self.Data().PlateTemplateGroups().push({ Id: ko.observable(0), Description: ko.observable(name), Components: ko.observableArray([]) });

This executes, but no new tab appears.

However, when I post my model back to my .Net controller, I see the new item.

Is there any reason why the new tab never appears? Maybe I am adding to the obervableArray incorrectly? I'm worried why I need to reference the objects using () all the time as well.

You need to push directly to the observable, not to the array it returns — haim770
– haim770, Commented Jul 14, 2017 at 8:33

Jose Luis · Accepted Answer · 2017-07-14 08:29:43Z

2

In your ViewModel you have an observable property Data. This property has other properties, like an observable array called PlateTemplateGroups.

Because Data is an observable that contains an object, you need to call it as a function to get this object:

Data()

Now, you can add an element to PlateTemplateGroups with push():

 self.Data().PlateTemplateGroups.push( ... )

Here is a Codepen as example. You can click the button and a TemplateGroup is added.

answered Jul 14, 2017 at 8:29

Jose Luis

9941 gold badge8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Craig Over a year ago

Wow... perfect! Thanks! That resolved it. I'm battling to understand when to use () and when not to. Maybe is a context issue I'm not understanding, but your fix has worked. Thank you.

Collectives™ on Stack Overflow

Add object to ObservableArray

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related