Question

I am attempting to pull down data from a JSON response that I wrote in MVC4 using the knockout.js library. I have these three areas that need to be populated, the first of which is a multi-select box. I have looked at examples online as well as references, and fiddlers linked here, to no avail. The area that I’m having an issue with is populating the arrayTwo and grid arrays with all of the data that comes down for each of the items that were selected in the arrayOne list.

function viewModel() {
    this.arrayOne = ko.observableArray();
    this.chosenarrayOne = ko.observableArray();
    this.arrayTwo = ko.observableArray();
    this.gridArray = ko.observableArray();
    this.chosenarrayTwo = ko.observableArray();
    this.chosenarrayOne.subscribe(function (nIds) {
        mvvm.arrayTwo(undefined);
        mvvm.gridArray(undefined);
        var nDx;
        if (nIds != null) {
            for (nDx = 0; nDx < nIds.length; nDx++) {
                $.ajax({
                    url: '{Working URL Omitted}',
                    data: { nValue: arrayOne[nDx] },
                    type: 'GET',
                    success: function (data) {
                        mvvm.arrayTwo(data);
                    },
                    error: function () {
                        alert('Array Two ajax error');
                    }
                });
                $.ajax({
                    url: '{Working URL Omitted}',
                    type: 'GET',
                    data: { nValue: nIds[nDx] },
                    success: function (data) {
// Example of what I would like to happen, however I get nothing back
                        mvvm.gridArray.arrayPushAll(data);

                        //mvvm.gridArray(data);
                    },
                    error: function () {
                        alert('Grid Array ajax error');
                    }
                });
            }
        }
    }, this);
}
var mvvm = new viewModel();
ko.applyBindings(mvvm);
$.ajax({
    url: '{Working URL Omitted}',
    type: 'GET',
    success: function (data) {
        mvvm.arrayOne(data);
    },
    error: function () {
        alert('Array One ajax call error');
    }
});

I have tried json-ing the response to see what comes back, and the values in array form come back. However if there is more than one element in the arrayOne var, nothing comes back.

Answer 1

In your ajax calls you are sending wrong data. If you want to get the value in observableArray you have to get like this :

arrayOne()[nDx] instead of arrayOne[nDx]

Check this example