Knockout observableArray object empty when pushing an object

Question

I have a ViewModel that is structured like this:

function CallLogViewModel() {
        var self = this;

        // Observables
        self.client = {
            Id: ko.observable(),
            Name: ko.observable().extend({required: true, message: 'Name is required'}),
            Surname: ko.observable().extend({ required: true, message: 'Surname is required' }),
            EmailAddress: ko.observable().extend({ required: true, message: 'Email is required', email: true }),
            Mobile: ko.observable(),
            Fax: ko.observable(),
            Tel: ko.observable(),
            Area: ko.observable(),
            HasCar: ko.observable(),
            HeardAboutMethodId: ko.observable().extend({ required: true, message: 'Please select option' }),
            DateOfBirth: ko.observable().extend({ required: true, message: 'DateOfBirth is required' }),
            Comments: ko.observableArray(),
            Calls: ko.observableArray()
        };


        self.comment = {
            Id: ko.observable(),
            Value: ko.observable().extend({ required: true, message: 'Comment is required' }),
            ClientId: ko.observable(),
            Created: ko.observable()
        };


        self.addComment = function () {
            self.comment.Created = moment().format('YYYY-MM-DD, HH:mm:ss');
            self.client.Comments.push(self.comment);

            self.comment.Created = '';
            self.comment.Value = '';

            $('#ClientCommentsTable').DataTable();

            console.log(self.client.Comments());
        };


    };

When I add a new self.comment object into the array object it does display the comment in the table but the array object shows that the values are empty strings?

Does it have something to do with how I clear the comment object?

It's a bit unclear what you are doing. Can you add a working snippet? You can create one through the edit question menu using the code <> button. — Nisarg Shah
– Nisarg Shah, Commented Oct 25, 2017 at 9:01
I want to add a self.comment object to sel.client.Comments object but when i view the self.client.Comments object it shows the values as empty strings — Gericke
– Gericke, Commented Oct 25, 2017 at 9:05
I think the problem is with the fact that self.comment is not recreated everytime while it is pushed to self.client.comments. But I'd need a working example to confirm that. — Nisarg Shah
– Nisarg Shah, Commented Oct 25, 2017 at 9:07
Created and Value are observables. To set the value, you need to use self.comment.Value(''); and self.comment.Created(moment()....). Also, you need to create a new object using the properties of self.comment — adiga
– adiga, Commented Oct 25, 2017 at 9:32

Jacques Bronkhorst · Accepted Answer · 2017-10-25 09:20:55Z

1

Try this:

self.client.Comments.push({ Id: self.comment.Id, Value: self.comment.Value, ClientId: self.comment.ClientId, Created: moment()  });

answered Oct 25, 2017 at 9:20

Jacques Bronkhorst

1,6956 gold badges35 silver badges65 bronze badges

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

Collectives™ on Stack Overflow

Knockout observableArray object empty when pushing an object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related