Bind observable array using AJAX inside function

Question

I'am using Knockout.js. I have a function like this:

function deviceGroupItem(item) {
    this.DeviceGroupName = item.DeviceGroupName;
    this.groupDevicesVisible = ko.observable(false)
    this.groupDevicesArray = ko.observableArray();
    this.deviceGroupClick = function () {
        if (this.groupDevicesVisible() == false) {
            this.groupDevicesVisible(true)
            $.ajax({
                url: returnServer() + '/api/Mobile/getRoomDevices?accessToken=' + localStorage.getItem('Token'),
                type: "GET",
                dataType: "json",
                success: function (data) {
                    this.groupDevicesArray()($.map(data, function (item) {
                        return new roomDeviceItem(item);
                    }))
                },
                error: function () {

                }
            })
        } else {
            this.groupDevicesVisible(false)
        }
    }
    return this;
}

Problem is, when I'am trying bind:

this.groupDevicesArray = ko.observableArray();

Using:

this.groupDevicesArray()($.map(data, function (item) {
                        return new roomDeviceItem(item);
                    }))

I'am receiving error "this.groupDevicesArray is not a function". Honestly, I dont know how to do this in correct way. Do You know how can I achieve that?

Try this : this.groupDevicesArray (ko.utils.arrayMap(data, function(item) { return new roomDeviceItem(item); }); or this.groupDevicesArray($.map(data, function (item) { return new roomDeviceItem(item); })) — G_S
– G_S, Commented Sep 4, 2015 at 13:04

super cool · Accepted Answer · 2015-09-04 15:30:17Z

1

The issue is because of you referring observable Array with this inside the function deviceGroupClick which does not exist because this refers to current context .

This technique depends on current closure which is a pseudo variable that may differ from scope to scope dynamically .

viewModel:

function roomDeviceItem(data) {
    this.room = ko.observable(data.room)
}

function deviceGroupItem() {
    var self=this; //Assign this to self & use self everywhere
    self.groupDevicesArray = ko.observableArray();
    self.deviceGroupClick = function () {
        $.ajax({
            url: '/echo/json/',
            type: "GET",
            dataType: "json",
            success: function (data) {
                data = [{
                    'room': 'One'
                }, {
                    'room': 'Two'
                }]
                self.groupDevicesArray($.map(data, function (item) {
                    return new roomDeviceItem(item);
                }))
            }
        });
    };
};
ko.applyBindings(new deviceGroupItem());

working sample here

Just in-case if you are looking for solution with this you need to use bind(this) to get reference of outer closure check here

edited Sep 4, 2015 at 15:30

answered Sep 4, 2015 at 15:11

super cool

6,0653 gold badges34 silver badges67 bronze badges

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

1 Comment

Shagohad Over a year ago

I found a solution, but this also works, so thank You for help!

Dandy · Accepted Answer · 2015-09-04 13:10:20Z

0

Try

this.groupDevicesArray($.map(data, function (item) {
  return new roomDeviceItem(item);
}));

groupDevicesArray is observableArray and $.map returns an array.

answered Sep 4, 2015 at 13:10

Dandy

2,20716 silver badges16 bronze badges

2 Comments

Shagohad Over a year ago

Thank You for answer, but problem is still the same.

Dandy Over a year ago

jsfiddle would help then.

Collectives™ on Stack Overflow

Bind observable array using AJAX inside function

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related