Parsing JSON Object in jQuery and create drop downs

Question

I want to parse a JSON object and create drop downs out of it. There will be six drop downs -

productType reportNames startDate startMonth endDate endMonth

I am able to create the first drop down 'productType' but when I am trying to create others it shows me some Undefined error message.

Here is my code -

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

});

Basically I want to create six drop downs like this:

productType - ABC, XYZ

reportNames - Report1, Report2

startDate - 2010, 2011

startMonth - May, June

endDate - 2010, 2011

endMonth - May, June

I am using jQuery to parse the JSON object. Here is the demo - http://jsfiddle.net/Lnv9d/3/

Ken Herbert · Accepted Answer · 2013-09-04 05:55:25Z

4

You are accessing your JSON incorrectly for the second dropdown.

this.productType is a string, not an array, so you cannot call this.productType[0].reportNames

If you change it to this.reportNames[0] then you may just get what you are looking for.

Here is the updated jsFiddle

Edit: Here is a new fiddle which handles showing and hiding the options based on what is already selected. It could probably use some optimization, but it works.

edited Sep 4, 2013 at 5:55

answered Sep 4, 2013 at 4:32

Ken Herbert

5,2465 gold badges31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Ansuman Over a year ago

That I have already done. Now I want to show the two reportNames under the productType ABC. Modified your demo a bit. So it should come Report1 and Report2 in the drop down. jsfiddle.net/Lnv9d/3

Joqus Over a year ago

This doesn't seems to be right since 'COUNTER Journal Report 2' and 'COUNTER Journal Report 4' don't appear in the second box.

Ansuman Over a year ago

Report1, Report2 are part of productType ABC and Report 3, Report 4 are part of productType XYZ. Can't we create a dropdown for Report1 and Report2 as the parent node is the same.

Ken Herbert Over a year ago

To get the end result you are looking for you are going to have to take one of two paths: 1) populate every possible member in the appropriate select, then listen for a change event which will show/hide the members that are/aren't acceptable. 2) Only ever have the top-level select loaded, and on changing the selected option empty and repopulate each select which relies on the top-level one.

Ken Herbert Over a year ago

I haven't implemented the JSON changes, but here is a working jsFiddle. It's not the greatest piece of code around, it could be cleaner, it could do with some optimization, but it works and it's time for me to leave work now.

|

Emilio Gort · Accepted Answer · 2013-09-04 04:33:26Z

1

Change this:

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

to:

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

answered Sep 4, 2013 at 4:33

Emilio Gort

3,4553 gold badges32 silver badges44 bronze badges

3 Comments

Ansuman Over a year ago

That I have already done. Now I want to show the two reportNames under the productType ABC. So it should come Report1 and Report2 in the drop down. jsfiddle.net/Lnv9d/3

Ansuman Over a year ago

There will be six drop downs: productType - ABC, XYZ reportNames - Report1, Report2 startDate - 2010, 2011 startMonth - May, June endDate - 2010, 2011 endMonth - May, June

mickmackusa Over a year ago

Code-only answers are low value on Stackoverflow because they do very little to educate/empower thousands of future researchers. Please always explain how your solution works and why it is a good idea for the benefit of future researchers.

rohitcopyright · Accepted Answer · 2013-09-04 05:33:51Z

1

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

edited Sep 4, 2013 at 5:33

answered Sep 4, 2013 at 5:25

rohitcopyright

3421 gold badge2 silver badges9 bronze badges

2 Comments

Ansuman Over a year ago

In the second dropdown it's showing Report1 and Report3. But I want to show Report1 and Report2 as both these are part of the node productType ABC. Report 3 is part of the node XYZ.

mickmackusa Over a year ago

Code-only answers are low value on Stackoverflow because they do very little to educate/empower thousands of future researchers. Please always explain how your solution works and why it is a good idea for the benefit of future researchers.

rohitcopyright · Accepted Answer · 2013-09-04 06:25:01Z

1

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

answered Sep 4, 2013 at 6:25

rohitcopyright

3421 gold badge2 silver badges9 bronze badges

1 Comment

mickmackusa Over a year ago

Code-only answers are low value on Stackoverflow because they do very little to educate/empower thousands of future researchers. Please always explain how your solution works and why it is a good idea for the benefit of future researchers.

Collectives™ on Stack Overflow

Parsing JSON Object in jQuery and create drop downs

HTML

Javascript

4 Answers 4

15 Comments

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

Javascript

4 Answers 4

15 Comments

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related