在jQuery中解析JSON对象并创建下拉列表

Question

我想解析一个JSON对象并从中创建下拉列表。会有六个下降 -

productType reportNames 开始日期 startMonth 结束日期 endMonth

我可以创建第一个下拉菜单'productType'，但是当我尝试创建其他菜单时，它会显示给我 一些未定义的错误消息。

这是我的代码 -

HTML

  <select id="product_type"></select>
  <select id="report_type"></select>
  <select id="startDate"></select>
  <select id="startMonth"></select>
  <select id="endDate"></select>
  <select id="endMonth"></select>

的Javascript

  var jsonString = '[{"productType": "ABC","reportNames": ["Report1",{"startDate": ["2010","2011"],"startMonth": ["May","June"],"endDate":["2010","2011"],"endMonth": ["May","June"]},"Report 2",{"startDate": ["2010","2011"],"startMonth": ["May","June"],"endDate": ["2010","2011"],"endMonth": ["May","June"]}]},{"productType": "XYZ","reportNames": ["Report 3",{"startDate": ["2010","2011"],"startMonth": ["May","June"],"endDate": ["2010","2011"],"endMonth": ["May","June"] },"Report 4",{"startDate": ["2010","2011"], "startMonth": ["May", "June" ],"endDate": ["2010","2011"],"endMonth": ["May","June"]}]}]';



  var myData = JSON.parse(jsonString);

  var $product_type = $('#product_type');
  var $report_type = $('#report_type');

  $.each(myData, function () {
      $('<option>' + this.productType + '</option>').appendTo($product_type);
  });

  $.each(myData, function () {
      $('<option>' + this.productType[0].reportNames +   '</option>').appendTo($report_type);

}）;

---

基本上我想创建六个这样的下拉菜单：

productType - ABC，XYZ

reportNames - Report1，Report2

startDate - 2010,2011

startMonth - May，June

endDate - 2010,2011

endMonth - May，June

我正在使用jQuery来解析JSON对象。 这是演示 - http://jsfiddle.net/Lnv9d/3/

Answer 1

您正在第二次下拉列表中错误地访问您的JSON。

this.productType是字符串，不是数组，因此您无法调用this.productType[0].reportNames

如果您将其更改为this.reportNames[0]，那么您可能会得到您想要的内容。

Here is the updated jsFiddle

编辑：Here is a new fiddle，根据已选择的内容处理显示和隐藏选项。它可能会使用一些优化，但它可以工作。

Answer 2

改变这个：

$.each(myData, function () {
   $('<option>' + this.productType[0].reportNames + '</option>').appendTo($report_type);
});

为：

$.each(myData, function () {
   $('<option>' + this.reportNames[0] + '</option>').appendTo($report_type);
});

Answer 3

You don't need to run the loop again for every select box.

You can try this , you will get the same result.

var myData = JSON.parse(jsonString);
var $product_type = $('#product_type');
var $report_type = $('#report_type');
var $start_date = $('#startDate');
var $start_month = $('#startMonth');
var $end_date = $('#endDate');
var $end_month = $('#endMonth');

var counter = 0; 
$.each(myData, function () {
    $('<option>' + this.productType + '</option>').appendTo($product_type);

    $('<option>' + this.reportNames[1].startDate[counter] + '</option>').appendTo($start_date);

    $('<option>' + this.reportNames[0] + '</option>').appendTo($report_type);

    $('<option>' + this.reportNames[1].startMonth[counter] + '</option>').appendTo($start_month);

    $('<option>' + this.reportNames[1].endDate[counter] + '</option>').appendTo($end_date);

    $('<option>' + this.reportNames[1].endMonth[counter] + '</option>').appendTo($end_month);

    counter++;
});

Answer 4

This is the updated one


var counter = 0; 
var reportCounter = 0;
$.each(myData, function () {

    $('<option>' + this.productType + '</option>').appendTo($product_type);

    $('<option>' + this.reportNames[1].startDate[counter] + '</option>').appendTo($start_date);
    var that = this;

    $.each(this.reportNames, function () {
       if(reportCounter <= 2)
        $('<option>' + that.reportNames[reportCounter] + '</option>').appendTo($report_type);
        reportCounter = reportCounter + 2;
    });
    $('<option>' + this.reportNames[1].startMonth[counter] + '</option>').appendTo($start_month);

    $('<option>' + this.reportNames[1].endDate[counter] + '</option>').appendTo($end_date);

    $('<option>' + this.reportNames[1].endMonth[counter] + '</option>').appendTo($end_month);

    counter++;
});