javascript - How to add datas from JSON data

Question

In this fiddle inside view appointmnets tab there is a available hospital drop down which has 3 fields A,B,c.

Now I want to make this dropdown from the values that I get from JSON.

This is my JSON data

   {
    "doctors": [
        {
            "id": 1,
            "schedules": [
                {
                    "id": 1,
                    "totime": "13:19",
                    "dayId": 1,
                    "locati??on": "Somajiguda",
                    "fromtime": "12:19",
                    "hospitalId": 5,
                    "day": "Monday",
                    "hospital": "Yas??hoda"
                }
            ],
            "username": "doctor",
            "degree": "MBBS,MD",
            "email": "[email protected]",
            "image??Path": "imagePathValue",
            "department": "Bio-Chemistry",
            "name": "doctor",
            "userid": 4,
            "g??ender": "Male",
            "mobile": "1234567890"
        }
    ]
}

In the above JSON there is one value for hospital "hospital": "Yas??hoda" so I want only "Yas??hoda" in the drop down.In the above JSON there is totime and fromtime fields also.I am able to get those fields but I am not getting hospital name in the dropdown.Can anybody throw some light in this.

This is my update fiddle and following is the js codes

var DocSchedule = function(id, day, fromtime, totime, hospital, hospitalId) {
    this.id = ko.observable(id);
    this.day = ko.observable(day);
    this.fromtime = ko.observable(fromtime);
    this.totime = ko.observable(totime);
    this.hospital = ko.observable(hospital);
    this.hospitalId = ko.observable(hospitalId);
}

var iter = 0;


//var genderOptions = ['Male', 'Female']; 
//var degreeOptions=['BDS','DA(Anaesthesia)','MBBS','MBBS,MD','MBBS,MD(Med)PMCH','MBBS,MD,FNB','MBBS,MS(ENT)','MD,DM,FISC','MD,MS,PhD,DSc','MDS(Oral Surgery)','MS(OPHTH),FICS','MS,DNB,MRCS(Edin),MCh(GASTRO)'] 
//var departmentOptions=['Anesthesiology','Bio-Chemistry','Cardiac Rehab Yoga','Cardio Thoracic Surgery','Cardiology','Chest Physician','Cosmetic Plastic and Hand Surgery','Critical Care','Dental&Facio maxillary Surgery','Dermatology','Diabetology','Dietary Services','Emergency Medicine','Endocrinology','Endoscopic,Head & Neck Surgery','Endoscopy','Gastroenterology','Gastrointestinal Medicine','General Medicine','General Surgery','Geriatrics','Gynecology','Hematology','Internal Medicine','Interventional Radiology','Laboratory Medicine','Laparoscopic Surgery','Medical Oncology','Micro-Biology','Nephrology','Neuro-Surgery','Neurology','Nuclear Medicine','Nuclear Medicinee','Obstetrics and Gynecology','Ophthalmology','Orthopedics & Traumatology','Otorhinolaryngology','Pathology','Pediatric Cardiology','Pediatric Surgery','Pediatrics','Physician','Physiotherapy','Psychiatry','Pulmonology','Radio-Diagnosis','Radiology','Rheumatology','Surgical Gastro-Enterology','Surgical Oncology','Urology','Vascular Surgery'] 
var Doctor = function(nameParam, usernameParam) {
    this.name = nameParam;
    this.username = usernameParam;
};
var doctors = [];

var Patientp = function() {
    this.id = ko.observable('');
    this.name = ko.observable('');
    this.degree = ko.observable('');
    this.gender = ko.observable('');
    //this.consultant= ko.observableArray(consultantArrValue); 
    this.username = ko.observable('');
    this.password = ko.observable('');
    this.email = ko.observable('');
    this.mobile = ko.observable('');
    this.imgFile = ko.observable('');
    this.imgSrc = ko.observable('');
    this.imagePath = ko.observable('');
    this.userid = ko.observable('');
    this.department = ko.observable('');
    //this.consultant= ko.observableArray(consultantArrValue); 
    //this.consultant= ko.observable(consultantValue); 



}


var projectUrl = $('#projectUrl').val();
var pat = new Patientp();
docp = new DocSchedule();

pat.imgFile = 'imagefileValue';
pat.imagePath = 'imagePathValue';


$.ajax({
    type: "GET",
    url: projectUrl + "getDoctors",
    dataType: "json",
    jsonp: true,
    async: false,
    success: function(data) {
        //alert(data); 
        $.each(data.doctors, function(index, currPat) {
            var doc = new Doctor(currPat.name, currPat.username);
            doctors.push(doc);
            if (currPat.userid == "${IDis}") {
                console.log(currPat.degree);
                pat.name = currPat.name;
                pat.username = currPat.username;
                pat.password = "";
                pat.email = currPat.email;
                pat.mobile = currPat.mobile;
                pat.gender = currPat.gender;
                pat.department = currPat.department;
                pat.degree = currPat.degree;
                pat.imgSrc = currPat.imagePath;
                pat.userid = currPat.userid;
                pat.id = currPat.id;
                $.each(currPat.schedules, function(index1, currPat1) {
                    //console.log(currPat1.totime); 
                    docp.fromtime = currPat1.fromtime;
                    docp.totime = currPat1.totime;
                    docp.hospital = currPat1.hospital;
                });
            }
        });
    }
});
/* var jsonobject=ko.utils.parseJson(test); 
$.each(jsonobject.patients,function(i,item){ 
var patient1 = new Patient(item.id, item.name, item.address, item.gender,item.consultant,item.username,"",item.email,item.mobile,"","",item.userid,item.imagePath); 
self.patients.push(patient1);   
});  */
//var patp=new Patientp(); 
//ko.applyBindings(patp); 

function vm() {
    var self = this;
    self.genderOptions = ['Male', 'Female'];
    self.hospitalOptions = ['Yashoda'];
    self.degreeOptions = ['BDS', 'DA(Anaesthesia)', 'MBBS', 'MBBS,MD', 'MBBS,MD(Med)PMCH', 'MBBS,MD,FNB', 'MBBS,MS(ENT)', 'MD,DM,FISC', 'MD,MS,PhD,DSc', 'MDS(Oral Surgery)', 'MS(OPHTH),FICS', 'MS,DNB,MRCS(Edin),MCh(GASTRO)']
    self.departmentOptions = ['Anesthesiology', 'Bio-Chemistry', 'Cardiac Rehab Yoga', 'Cardio Thoracic Surgery', 'Cardiology', 'Chest Physician', 'Cosmetic Plastic and Hand Surgery', 'Critical Care', 'Dental&Facio maxillary Surgery', 'Dermatology', 'Diabetology', 'Dietary Services', 'Emergency Medicine', 'Endocrinology', 'Endoscopic,Head & Neck Surgery', 'Endoscopy', 'Gastroenterology', 'Gastrointestinal Medicine', 'General Medicine', 'General Surgery', 'Geriatrics', 'Gynecology', 'Hematology', 'Internal Medicine', 'Interventional Radiology', 'Laboratory Medicine', 'Laparoscopic Surgery', 'Medical Oncology', 'Micro-Biology', 'Nephrology', 'Neuro-Surgery', 'Neurology', 'Nuclear Medicine', 'Nuclear Medicinee', 'Obstetrics and Gynecology', 'Ophthalmology', 'Orthopedics & Traumatology', 'Otorhinolaryngology', 'Pathology', 'Pediatric Cardiology', 'Pediatric Surgery', 'Pediatrics', 'Physician', 'Physiotherapy', 'Psychiatry', 'Pulmonology', 'Radio-Diagnosis', 'Radiology', 'Rheumatology', 'Surgical Gastro-Enterology', 'Surgical Oncology', 'Urology', 'Vascular Surgery']
    self.person = pat;
    self.schedule = docp;

    self.schedules = ko.observableArray([new DocSchedule(iter)]);
    self.addSlot = function() {
        console.log(self.schedules.length);
        iter++;
        var docSchedule = new DocSchedule(iter);
        self.schedules.push(docSchedule);
    };

    self.removeSlot = function() {
        console.log('removed');
        self.schedules.remove(this);
    }

};
var viewModel = new vm();
ko.applyBindings(viewModel);
$('#saveButton').click(function() {
    alert('savebutton');
    var testjson = ko.toJSON(pat);
    console.log(testjson);
    var formdata = new FormData();
    formdata.append("doctormetada", testjson);
    console.log(projectUrl + "updateDoctor");
    $.ajax({
        url: projectUrl + "updateDoctor",
        type: "POST",
        data: formdata,
        processData: false,
        contentType: false,
        success: function(res) {
            formdata = new FormData();
            //self.doctor(new Doctor()); 
        }

    });

});

Answer 1

i have just changed in your html code and now its working

 <select class="span8" name="hospital" 
                data-bind="options: $root.hospitalOptions,value: docp.hospital,optionsCaption: 'Select Hospital'"
                data-required="true" data-trigger="change">
            </select>

see link