how to bind selectlist to value using json in javascript

Question

I'm new to web application development and i need to bind values which i retrieved from json object. i tried several ways but couldn't able to bind values to my combo box.

<script type="text/javascript">

     var ViewModel = {  
         CheckIn : ko.observable(),
         CheckOut: ko.observable(),
         Lunch: ko.observable(),
         Rest: ko.observable(),
         WorkOnProject: ko.observable(),
         Projects: ko.observableArray()
     };


this.GetProjects = function () {
    $.ajax({
        type: "POST",
        url: 'TimeRecord.aspx/ReturnComplexType',
        data: {},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (arg) {


            for (var i = 0; i < arg.d.length ; i++) {
                var value = arg.d[i].ProjectCode;

                var option = new Option(arg.d[i].ProjectCode, arg.d[i].ProjectCode);
                Select1.add(option, null);
            }

        },
        error: function (arg) {
        }
    });
};

ko.applyBindings(ViewModel);

</script>

My HTML Code:

    <tr>
         <td class="auto-style1">Project Code </td> 
         <td ><select id="Select1" data-bind='options: Projects' style="width: 312px"></select>
               <button data-bind='click: GetProjects'>Cancel</button>
         </td> 
    </tr>

My Sever Side Coding :

   [WebMethod]
        public static object ReturnComplexType()
        {

            List<Project> projects = new List<Project>();
            Project p = new Project();
            p.ProjectID = 1;
            p.ProjectCode = "ABC";
            p.ProjectName = "Test";
            projects.Add(p);

            Project p2 = new Project();
            p2.ProjectID = 2;
            p2.ProjectCode = "DEF";
            p2.ProjectName = "xsd";
            projects.Add(p2);

            return projects;

        }

you do not assign your projects to your ViewModel.Projects array? What is Select1? Why do you add the GetProjects function to the window object? click: GetProjects will look at the viewmodel not the window object, you need to change to click: window.GetProjects. But i do not think thats what you want? — Anders
– Anders, Commented Jul 1, 2013 at 11:09

Anders · Accepted Answer · 2013-07-02 07:22:10Z

Your structure is way off, you're mixing object instances with function on the window object.. This is one way of solving it

ViewModel = function() {
    this.CheckIn = ko.observable();
    this.CheckOut = ko.observable();
    this.Lunch = ko.observable();
    this.Rest = ko.observable();
    this.WorkOnProject = ko.observable();
    this.Projects = ko.observableArray()   
};

ViewModel.prototype = {
    GetProjects: function () {
        $.ajax({
            type: "POST",
            url: 'TimeRecord.aspx/ReturnComplexType',
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                this.Projects(data);
            }.bind(this),
            error: function (arg) {
            }
        });
    };
};

ko.applyBindings(new ViewModel());

What I did was to move the GetProjects function to the model object

Andrew Walters · Accepted Answer · 2013-07-01 15:02:41Z

Your select box is bound to the Projects observable but you don't set an explicit text/value

<select id="Select1" data-bind='options: Projects, optionsText: 'ProjectName', optionsValue:'ProjectID', value: SelectedProjectId"' style="width: 312px"></select>

The SelectedProjectId would be another observable in your model if you need to save the value somewhere.

The other thing you'll want to change is filling the actual observable array instead of select box directly.

<script type="text/javascript">

     function ViewModel() {  
         var self = this;
         self.CheckIn = ko.observable();
         self.CheckOut = ko.observable();
         self.Lunch = ko.observable();
         self.Rest = ko.observable();
         self.WorkOnProject = ko.observable();
         self.Projects = ko.observableArray();
     };

     var VM = new ViewModel();

     ko.applyBindings(ViewModel);


    $.ajax({
        type: "POST",
        url: 'TimeRecord.aspx/ReturnComplexType',
        data: {},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (arg) {

            for (var i = 0; i < arg.d.length ; i++) {
                VM.Projects.push(d[i]);
            }

        },
        error: function (arg) {
        }
    });

</script>

After you get things binding right you'll probably want to swap out the VM.Projects.push() for a speedier way.

Calling .push() when you're filling up arrays on initial load triggers a ton of notifications that can really make the page crawl.

Collectives™ on Stack Overflow

how to bind selectlist to value using json in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related