将包含数据集的JSON绑定到使用JQUERY的下拉列表

时间:2015-03-18 10:59:25

标签: javascript jquery json wcf

我有一个WCF服务返回的JSON string,它包含Data中的两个表,作为其中的字符串:

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"
       }
   }
}

我尝试使用JavaScript绑定它,如下所示:

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);
        }
}

如何使用JQUERY实现相同目标? 谢谢!

2 个答案:

答案 0 :(得分:1)

我自己想出了解决方案! :)
问题在于JSON对象包含GetYearsResult作为表的集合,为了找到这些表,我们必须指定:

  1. data.GetYearsResult.Data
  2. data.GetYearsResult.MetaData
  3. 下面的函数接受JSON数据,下拉名称,并使用drop-down list将第一个数据集表绑定到textbox,将第二个表绑定到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']);
    }
    

答案 1 :(得分:0)

试试这个:

var $ddl = $('#ddlYears');
$("<option>").val(0).text('--Select--').appendTo($ddl);

for (var i = 0; i < response.Table.length; i ++) {
    $("<option>").val(response.Table[i]['holiday_date'])
                 .text(response.Table[i]['holiday_date'])
                 .appendTo($ddl);
}