title: Cascade Dropdown JSON
body: <p>Yes, this has been posted many times. But I am unable to locate the assistance I need in the other posts. I have a JSON which I am using to populate cascading dropdowns. The initial population of the first dropdown works great, but I am unable to have the other two populate. I believe it is due to the nested arrays in JSON of which I have tried looping, nested looping etc......</p>
  
  <p>Here is my JSON:</p>
  
  <pre><code>"DATA": [
      {
        "productcodelist": [
          {
            "tablenamelist": [
              {
                "tablenamevalue": "FryLineProcessGrading"
              }
            ],
            "productcodevalue": 10055440000148
          },
          {
            "tablenamelist": [
              {
                "tablenamevalue": "FryLineProcessGrading"
              }
            ],
            "productcodevalue": 10071179018124
          },
          {
            "tablenamelist": [
              {
                "tablenamevalue": "FryLineProcessGrading"
              },
              {
                "tablenamevalue": "ProcessGradingFry"
              },
              {
                "tablenamevalue": "UODrying"
              },
              {
                "tablenamevalue": "UOFreezing"
              }
            ],
            "productcodevalue": 10071179036432
          },
          {
            "tablenamelist": [
              {
                "tablenamevalue": "FryLineProcessGrading"
              },
              {
                "tablenamevalue": "ProcessGradingFry"
              },
              {
                "tablenamevalue": "UODrying"
              },
              {
                "tablenamevalue": "UOFreezing"
              }
            ],
            "productcodevalue": 10071179037545
          },
          {
            "tablenamelist": [
              {
                "tablenamevalue": "FryLineProcessGrading"
              },
              {
                "tablenamevalue": "ProcessGradingFry"
              },
              {
                "tablenamevalue": "UODrying"
              },
              {
                "tablenamevalue": "UOFreezing"
              }
            ],
            "productcodevalue": 10071179037613
          },
          {
            "tablenamelist": [
              {
                "tablenamevalue": "FryLineProcessGrading"
              },
              {
                "tablenamevalue": "ProcessGradingFry"
              },
              {
                "tablenamevalue": "UODrying"
              },
              {
                "tablenamevalue": "UOFreezing"
              }
            ],
            "productcodevalue": 10071179462033
          }
        ],
        "linevalue": 1
      },
      {
        "productcodelist": [
          {
            "tablenamelist": [
              {
                "tablenamevalue": "HalverSizeCounts"
              }
            ],
            "productcodevalue": 10071179036449
          }
        ],
        "linevalue": 2
      },
      {
        "productcodelist": [
          {
            "tablenamelist": [
              {
                "tablenamevalue": "MetalDetectorCheckSheet"
              }
            ],
            "productcodevalue": 10071179036432
          }
        ],
        "linevalue": 10
      }
    ]
  }
  </code></pre>
  
  <p>Here is my JavaScript code:</p>
  
  <pre><code>    $(document).ready(function(){ 
  
      var specData = [];
      var lineCategory = $('#line').val();
      var productcodeCategory = $('#productcode').val();
  
      $.ajax(
          {
          type: "get",
          url: "index.cfm?controller=ProcessSpecs&amp;Action=getSpecData",
          dataType: "json",
          success: function(objResponse) {
  
                      if (objResponse.SUCCESS == true) {
                          specData = objResponse.DATA;
  
                          $('#line')
                              .append('&lt;option&gt;Select Lines&lt;/option&gt;')                
  
                          $.each(specData, function(k, v) {
                              $('#line')
                                  .append($('&lt;option&gt;', {value : v.linevalue})
                                  .text(v.linevalue))
                          }); 
  
                          $('#line').val(linevalue).trigger('change');
  
  
                      } else {
  
                      }               
                  },
  
                  error: function(objRequest, strError) {
  
                  }
          });
  
      $('#line').change(function() {
  
              var val = $(this).val();
  
              var specSelected = jQuery.grep(specData, function(element, index) {
  
                  if (element.linevalue == val) {
  
                      return element.productcodelist;
  
                  }
              });
  
              $('#productcode')
                  .find('option')
                  .remove()
                  .end();
  
              $.each(specData.productcodelist, function(k, v) {
                  $('#productcode')
                      .append($('&lt;option&gt;', {value: v.productcodevalue})
                      .text(v.productcodevalue));         
              });
  
          });
  
  });
  </code></pre>
  
  <p>The #line change function will start but I am unable to get the productcodevalue to be created and populated in the productcode dropdown. The following code does work to get the JSON data that is associated with a specific line.</p>
  
  <pre><code>var specSelected = jQuery.grep(specData, function(element, index) {
  
                  if (element.linevalue == val) {
  
                      return element.productcodelist;
  
                  }
              });
  </code></pre>
  
  <p>Verified by adding:</p>
  
  <pre><code>alert(JSON.stringify(specSelected));
  </code></pre>
  
  <p>But after that anything I have tried or plagiarized has not worked in populating the productcodevalue into the #productcode select box.</p>
  
  <pre><code>&lt;form name="getSpecData"&gt;
          &lt;select name="line" id="line"&gt;
  
          &lt;/select&gt;
          &lt;select name="productcode" id="productcode"&gt;
  
          &lt;/select&gt;
          &lt;select name="tablename" id="tablename"&gt;
  
          &lt;/select&gt;
          &lt;input type="Submit" value="Get Specs" /&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>Any advice, assistance, and or guidance is appreciated.</p>
  
  <p>Update: I have figured out how to populate the #productcode select. Not elegant, but workable.</p>
  
  <pre><code>$('#line').change(function() {
  
              var val = $(this).val();
  
              var specSelected = jQuery.grep(specData, function(element, index) {
  
                  if (element.linevalue == val) {
  
                      return element.productcodelist;
  
                  }
              });
  
              $('#productcode')
                  .find('option')
                  .remove()
                  .end();
  
              $('#productcode')
                  .append('&lt;option&gt;Select Product Code&lt;/option&gt;')
  
              $('#tablename')
                  .append('&lt;option&gt;Select Product Code First&lt;/option&gt;')   
  
              for (productcodelist in specSelected) {
                for (tablenamelist in specSelected[productcodelist]) {
                  $.each(specSelected[productcodelist][tablenamelist], function(k, v) {
                      $('#productcode')
                          .append($('&lt;option&gt;', {value: v.productcodevalue})
                          .text(v.productcodevalue));         
                  });
                }
              }
          });
  </code></pre>
  
  <p>Still seeking advice on the third dropdown for tablename since it is a nested array that will need to equal the line and productcode dropdowns.</p>