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......
Here is my JSON:
"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
}
]
}
Here is my JavaScript code:
$(document).ready(function(){
var specData = [];
var lineCategory = $('#line').val();
var productcodeCategory = $('#productcode').val();
$.ajax(
{
type: "get",
url: "index.cfm?controller=ProcessSpecs&Action=getSpecData",
dataType: "json",
success: function(objResponse) {
if (objResponse.SUCCESS == true) {
specData = objResponse.DATA;
$('#line')
.append('<option>Select Lines</option>')
$.each(specData, function(k, v) {
$('#line')
.append($('<option>', {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($('<option>', {value: v.productcodevalue})
.text(v.productcodevalue));
});
});
});
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.
var specSelected = jQuery.grep(specData, function(element, index) {
if (element.linevalue == val) {
return element.productcodelist;
}
});
Verified by adding:
alert(JSON.stringify(specSelected));
But after that anything I have tried or plagiarized has not worked in populating the productcodevalue into the #productcode select box.
<form name="getSpecData">
<select name="line" id="line">
</select>
<select name="productcode" id="productcode">
</select>
<select name="tablename" id="tablename">
</select>
<input type="Submit" value="Get Specs" />
</form>
Any advice, assistance, and or guidance is appreciated.
Update: I have figured out how to populate the #productcode select. Not elegant, but workable.
$('#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('<option>Select Product Code</option>')
$('#tablename')
.append('<option>Select Product Code First</option>')
for (productcodelist in specSelected) {
for (tablenamelist in specSelected[productcodelist]) {
$.each(specSelected[productcodelist][tablenamelist], function(k, v) {
$('#productcode')
.append($('<option>', {value: v.productcodevalue})
.text(v.productcodevalue));
});
}
}
});
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.
Not elegant, but figured it out. Since it works I will close this. If anyone sees a way I can improve my code, by all means post your recommendations here.
$('#productcode').change(function() {
var lineval = $('#line').val();
var productcodeval = $("#productcode").val();
var specSelected = jQuery.grep(specData, function(element, index) {
if (element.linevalue == lineval) {
return element.productcodelist;
}
});
$('#tablename')
.find('option')
.remove()
.end();
$('#tablename')
.append('<option>Select Product Code</option>')
for (productcodelist in specSelected) {
for (tablenamelist in specSelected[productcodelist]) {
for (productcodevalue in specSelected[productcodelist][tablenamelist]) {
if(specSelected[productcodelist][tablenamelist][productcodevalue].productcodevalue == productcodeval) {
for (tablenamevalue in specSelected[productcodelist][tablenamelist][productcodevalue]) {
$.each(specSelected[productcodelist][tablenamelist][productcodevalue][tablenamevalue], function(k, v) {
$('#tablename')
.append($('<option>', {value: v.tablenamevalue})
.text(v.tablenamevalue));
});
}
}
}
}
}
});