Populating a dropdownlist using Knockout JS option, using a json object returned by ajax call

Question

I'm using knockout js for data binding in my single page web application, I need to populate a dropdown list using a json object returned as response by an ajax call to the sever. I'm adding my model and ajax call here. Please suggest solutions.

var permissionRequestModel = {
fromDate: ko.observable(''),
toDate: ko.observable(''),
fulldayPermission: ko.observable(false),

fromTimeHH: ko.observable(''),
fromTimeMM: ko.observable(''),
toTimeHH: ko.observable(''),
toTimeMM: ko.observable(''),

permissionTypeOne: ko.observable(''),
permissionTypeTwo: ko.observable(''),

approverList: ko.observableArray([]),

reasonLeave: ko.observable('')

};

//ajax call

$(function () {

$.ajax({
    url: "{generic uri}",
    type: "GET",
    contentType: "application/json",
    dataType: "json",
    error: function () {
        alert("failed");
    },
    success: function (data) {
             alert("Success");
    }
});
});

I need to populate the ApproverList (ko.observablearray) with the json response.

Paul Manzotti · Accepted Answer · 2013-01-31 12:46:02Z

3

Using the Knockout Mapping plugin:

approverList = ko.mapping.fromJS(data);

Or if you want to update an already populated view model:

success: function (data)
{
    ko.mapping.fromJS(data, approverList);
}

edited Jan 31, 2013 at 12:46

answered Jan 31, 2013 at 11:20

Paul Manzotti

5,14723 silver badges28 bronze badges

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

2 Comments

anwith.ct Over a year ago

can you show me where to write this line of code? inside the ajax success function?

anwith.ct Over a year ago

Hi, it seems like your answer is right, but I was not able to make it work. Instead I was able to do it with "permissionRequestModel.approverList(data);" in the success function. Thanks for your answer and time.

Collectives™ on Stack Overflow

Populating a dropdownlist using Knockout JS option, using a json object returned by ajax call

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related