CODEWITHSUNDEEP
knockout.js
user2279126
user2279126

Reputation:

How to add array of objects into observable array in knockout?

I am getting a large array of objects through ajax and if the array has data then it will be passed to ImportObservableListItems in my viewmodel:

        success: function (data) {
            debugger 
            if (data.length > 0) {

            ReadingList.ImportObservableListItems(data);

            }

in the viewmodel I would like to add each object to an observable array but I need the properties of each object to be observable. however if the array contains a large number of objects then the browser crashes. is there any way I could prevent it?

self.ImportObservableListItems = function (data) {
            $.each(data, function(index, item) {
                var newListItem = {
                    MediaID: ko.observable(item.MediaID),
                    MediaName: ko.observable(item.MediaName),
                    MediaTypeID: ko.observable(item.MediaTypeID),
                    MediaTypeName: ko.observable(item.MediaTypeName),
                    Group1: ko.observable(item.Group1),
                    Group2: ko.observable(item.Group2),
                    Group3: ko.observable(item.Group3),
                    Group4: ko.observable(item.Group4),
                    Group5: ko.observable(item.Group5)
                };
                ReadingList.ReadingListItems.push(newListItem);
            });
        };

Upvotes: 11

Views: 13682

Answers (1)

Brandon
Brandon

Reputation: 39182

You can reduce the churn by pushing all the items at once (push accepts multiple items):

var items = $.map(data, function (item) {
    return {
        MediaID: ko.observable(item.MediaID),
        MediaName: ko.observable(item.MediaName),
        MediaTypeID: ko.observable(item.MediaTypeID),
        MediaTypeName: ko.observable(item.MediaTypeName),
        Group1: ko.observable(item.Group1),
        Group2: ko.observable(item.Group2),
        Group3: ko.observable(item.Group3),
        Group4: ko.observable(item.Group4),
        Group5: ko.observable(item.Group5)
    };
});

ReadingList.ReadingListItems.push.apply(ReadingList.ReadingListItems, items);

This will cause only a single notification to go out when all the items have been added, instead of once per item.

Upvotes: 25

Related Questions