How To Add Datas From Json Data
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.
Solution 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
Solution 2:
Try this:
Html
<divstyle="padding-bottom: 9px; overflow: hidden"class="tab-content"><divid="Profile"class="tab-pane active">
Profile
<divclass="span6"><p><labelclass="control-label"for="inputIcon">Name :</label><inputclass="span8"type="text"data-bind="value: doctor.name"data-required="true"data-trigger="change"name="name"></p><p><labelclass="control-label"for="inputIcon">Department :</label><selectclass="span8"name="department"data-bind="options: departmentOptions, value: doctor.department, optionsCaption: 'Select Department'"data-required="true"data-trigger="change"></select></p><p><labelclass="control-label"for="inputIcon">Gender :</label><selectclass="span8"name="gender"data-bind="options: genderOptions, value: doctor.gender, optionsCaption: 'Select Gender'"data-required="true"data-trigger="change"></select></p><p><labelclass="control-label"for="inputIcon">Degree :</label><selectclass="span8"name="degree"data-bind="options: degreeOptions, value: doctor.degree, optionsCaption: 'Select Degree'"data-required="true"data-trigger="change"></select></p><p><labelclass="control-label"for="inputIcon">Username :</label><inputclass="span8"type="text"data-bind="value: doctor.username"name="username"data-required="true"data-trigger="change"data-remote="/MoDoc/isUserNameExists"data-remote-method="GET"></p><p><labelclass="control-label"for="inputIcon">Password :</label><inputclass="span8"type="password"data-bind="value: doctor.password"name="password"data-required="true"data-trigger="change"></p><p><labelclass="control-label"for="inputIcon">Mobile :</label><inputclass="span8"type="text"data-bind="value: doctor.mobile"data-type="number"data-minlength="10"data-required="true"data-trigger="change"data-type="phone"name="mobile"></p><p><labelclass="control-label"for="inputIcon">Email address :</label><inputclass="span8"type="text"data-bind="value: doctor.email"data-required="true"data-trigger="change"data-type="email"name="email"></p></div><divclass="span6"><!--<div data-bind="template: {name: 'profileImageTemplate'}"></div> --><divstyle="margin-top: 28px;"><divclass="fileupload fileupload-new"data-provides="fileupload"><divdata-bind="if: doctor.imgSrc"><divclass="fileupload-new thumbnail"style="width: 150px; height: 150px;"><imgdata-bind="attr: { src: doctor.imgSrc }" /></div></div><divdata-bind="ifnot: doctor.imgSrc"><divclass="fileupload-new thumbnail"style="width: 150px; height: 150px;"><imgsrc="ui_resources/img/profile_pic.png" /></div></div><divclass="fileupload-preview fileupload-exists thumbnail"style="max-width: 150px; max-height: 150px; line-height: 20px;"></div><div><spanclass="btn btn-file"><spanclass="fileupload-new">Select image</span><spanclass="fileupload-exists">Change</span><inputtype="file"data-bind=" file: doctor.imgFile, fileObjectURL: doctor.imgSrc" /></span><ahref="#"class="btn fileupload-exists"data-dismiss="fileupload">Remove</a></div></div></div></div><divalign="center"class="span12"><buttonclass="btn btn-primary"id="saveButton"><iclass="icon-ok icon-white"></i>Save
</button><buttonclass="btn"><iclass="icon-remove"></i>Cancel
</button></div></div><divid="appointments"class="tab-pane ">
Appointments
<formid="addDoctorSchedules"data-validate="parsley"><tablewidth="100%"cellspacing="0"cellpadding="0"border="0"><thead><tr><thvalign="middle"align="left"style="border-bottom: #edf6f9 solid 1px; border-top: #edf6f9 solid 1px; width: 222px;">Week Day</th><thalign="center"id="to1">From Time</th><thalign="center"id="Td1">To Time</th><thalign="center"id="Td2">Available Hospital</th><th></th></tr></thead><tbodydata-bind='foreach: schedules'><tr><tdwidth="125"valign="middle"align="left"style="border-bottom: #edf6f9 solid 1px; border-top: #edf6f9 solid 1px;"><selectclass="span8"name="day"data-bind="options: $parent.weekdays, value: day, optionsCaption: 'Select Day'"data-required="true"data-trigger="change"></select></td><tdalign="center"id="Td3"><inputtype="text"data-format="hh:mm"data-bind="value: fromtime()"style="width: 82px"></td><tdalign="center"id="Td4"><inputtype="text"data-format="hh:mm"data-bind="value: totime()"style="width: 82px"></td><tdalign="center"id="Td8"><selectclass="span8"name="hospital"data-bind="options: $parent.hospitalOptions, value: hospital, optionsCaption: 'Select Hospital'"data-required="true"data-trigger="change"></select></td><td><buttonclass="btn btn-primary"type="button"data-bind="click: $parent.addSlot"value="Add">Add Timing</button><ahref='#'class="btn btn-primary"data-bind='click: $parent.removeSlot'>Remove</a></td></tr></tbody></table></form></div></div>JavsScript
var Model;
(function (Model) {
var Doctor = (function () {
function Doctor(data) {
if(data != null) {
this.id = ko.observable(data['id']);
this.name = ko.observable(data['name']);
this.degree = ko.observable(data['degree']);
this.gender = ko.observable(data['gender']);
this.username = ko.observable(data['username']);
this.password = ko.observable(data['password']);
this.email = ko.observable(data['email']);
this.mobile = ko.observable(data['mobile']);
this.imgFile = ko.observable(data['imgFile']);
this.imgSrc = ko.observable(data['imgSrc']);
this.imagePath = ko.observable(data['imagePath']);
this.userid = ko.observable(data['userid']);
this.department = ko.observable(data['department']);
} else {
this.id = ko.observable('');
this.name = ko.observable('');
this.degree = ko.observable('');
this.gender = ko.observable('');
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('');
}
}
return Doctor;
})();
Model.Doctor = Doctor;
var Schedule = (function () {
function Schedule(data) {
if(data != null) {
this.id = ko.observable('' + Schedule._id++);
this.day = ko.observable(data['day']);
this.fromtime = ko.observable(data['fromtime']);
this.totime = ko.observable(data['totime']);
this.hospital = ko.observable(data['hospital']);
this.hospitalId = ko.observable(data['hospitalId']);
} else {
this.id = ko.observable('' + Schedule._id++);
this.day = ko.observable('');
this.fromtime = ko.observable('');
this.totime = ko.observable('');
this.hospital = ko.observable('');
this.hospitalId = ko.observable('');
}
}
Schedule._id = 0;
return Schedule;
})();
Model.Schedule = Schedule;
})(Model || (Model = {}));
var projectUrl = $('#projectUrl').val();
$.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 == "4") {
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;
});
}
});
}
});
vardata = {
"doctors": [
{
"id": 1,
"schedules": [
{
"id": 1,
"totime": "13:19",
"dayId": 1,
"location": "Somajiguda",
"fromtime": "12:19",
"hospitalId": 5,
"day": "Monday",
"hospital": "Yashoda"
}
], "username": "doctor",
"degree": "MBBS,MD",
"email": "sukant@iconma.com",
"imagePath": "imagePathValue",
"department": "Bio-Chemistry",
"name": "doctor",
"userid": 4,
"gender": "Male",
"mobile": "1234567890"
}]
};
var doctor = data.doctors[0];
var doc = new Model.Doctor(doctor);
doc.imgFile = 'imagefileValue';
doc.imagePath = 'imagePathValue';
var schedules = [];
for (var i = 0; i < doctor.schedules.length; i++) {
schedules.push(new Model.Schedule(doctor.schedules[i]));
}
var hospitals = [];
for (var i = 0; i < schedules.length; i++) {
hospitals.push(schedules[i].hospital);
}
function vm() {
var self = this;
self.genderOptions = ['Male', 'Female'];
self.weekdays = ["Monday","Tuesday","Wednesday","Thursday", "Friday","Saturday","Sunday"]
self.hospitalOptions = hospitals;
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.doctor = doc;
self.schedules = ko.observableArray(schedules);
self.addSlot = function () {
self.schedules.push(new Model.Schedule(null));
};
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();
}
});
});
Post a Comment for "How To Add Datas From Json Data"