Vikrant Vikrant - 4 years ago 198
Javascript Question

Bind JSON containing a dataset, to dropdownlist using JQUERY

I have a

JSON string
returned by a WCF service, which contains two tables in Data, as a string in it:

JSON



{
"GetYearsResult":
{
"Data": "{"Table":[{"holiday_date":null},{"holiday_date":1900},
{"holiday_date":2011},{"holiday_date":2012},{"holiday_date":2013},
{"holiday_date":2014},{"holiday_date":2015},{"holiday_date":2016},
{"holiday_date":2017},{"holiday_date":2018},{"holiday_date":2019},
{"holiday_date":2020},{"holiday_date":2021},{"holiday_date":2022},
{"holiday_date":2023},{"holiday_date":2024},{"holiday_date":2025}]
,"Table1":[{"holiday_day":1}]}",
"Metadata":
{
"Response": 1000,
"ResponseCode": 1000,
"ResponseMessage": "Success",
"ResponseTime": "18-Mar-2015 15:29:55"
}
}
}


I've tried to bind it using
JavaScript
as below:

function ConsumeData(data) {
var response = $.parseJSON(data);
$('#ddlYears').empty();

//code to bind data to ddl
var ddl = D.getElementById('ddlYears');
var opt = D.createElement("option");
opt.text = '--Select--';
opt.value = 0;
ddl.options.add(opt);
for (i = 0; i < response.Table.length; i++) {
opt = D.createElement("option");
opt.text = response.Table[i]['holiday_date'];
opt.value = response.Table[i]['holiday_date'];
ddl.options.add(opt);
}
}


How can I achieve the same with
JQUERY
?

Thank You!

Answer Source

I created solution myself! :)
Issue was with JSON object that contains GetYearsResult as a collection of tables and to find those tables, we have to specify:

  1. data.GetYearsResult.Data and
  2. data.GetYearsResult.MetaData.

Below function accepts json data, dropdown name and binds first table of dataset to dropdownlist and second one to textbox using Jquery.

var result = data.GetYearsResult.Data;
var ddl = D.getElementById('ddlYears');

function ConsumeData(result, ddl) {
   var response = $.parseJSON(result);
   var ddl = $('#ddlYears');
   ddl.empty();
   ddl.append($("<option></option>").val('-1').html('--select--'));
   $.each(response.Table, function (key, value) {
      ddl.append($("<option></option>").val(value.holiday_date).html(value.holiday_date));
   });
   $('#txtNew').val(response.Table1[0]['holiday_day']);
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download