Abhishek Pathak Abhishek Pathak - 1 month ago 9
jQuery Question

JSON accessing array objects using a named index

Suppose I have this HTML

<form action="#" action="get">

<select name="college" id="college" onchange="selection('college', 'course')">
<option value="">Select an Option</option>
<option value="amity">Amity University</option>
<option value="indraprastha">Indraprasth University</option>
</select>

<br>
<select name="course" id="course" onchange="selection('course', 'stream')" >
<option value="">Select an Option</option>
</select>

<br>
<select name="stream" id="stream">
<option value="">Select an Option</option>
</select>

</form>


I have this JSON,

{
"amity":{
"course":[
{
"name":"B.Tech",
"value":"btech",
"stream":[
{
"name":"Computer Science",
"value":"cse"
},
{
"name":"Information Technology",
"value":"cse"
},
{
"name":"Aerospace Engg.",
"value":"cse"
}
]
},
{
"name":"M.Tech",
"value":"mtech",
"stream":[
{
"name":"Networking",
"value":"net"
},
{
"name":"telecommunications",
"value":"tc"
}
]
}
]
}
}


The Javascript is,

function selection(s1, s2) {
var first = document.getElementById(s1),
second = document.getElementById(s2);

var college = $('#college').val(),
cr = $('#course').val(),
st = $('#stream').val(),
se = $('#sem').val();

$.getJSON("json/select.json", function(data) {

switch(s1) {
case 'college':
$.each(data[college].course, function(key, value) {
second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
}); break;

case 'course':
$.each(data[college].course[].stream, function(key, value) {
second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
}); break;
}
});
}


I am making a dynamic drop-down menu where the next drop down values are fetched from JSON object file, using the reference of previous values. As suggested from my this question (link), I am able to get the value of course (second drop-down) using the course array in the object.

Now, since the values in the second select menu(course) are filled dynamically, I can't figure out how to take the corresponding course array element to fill the next select menu options for stream array.

Since the course property in JSON is an array, I don't know which index element element is chosen from second menu (See the switch case for 'course', the
data[college].course[]
index is empty). The hardcoded
[0]
works, but that's not dynamic then.

How to access the
stream
array using the values of course grabbed from second menu.

I hope I am clear. Thanks in advance!

Answer

Just iterate through array of courses to get the stream dynamically:

for (var i = 0; i < data[college].course.length; i++) { 
    currentStream = data[college].course[i].stream; 
}

I.e. using your code:

for (var i = 0; i < data[college].course.length; i++) {
    $.each(data[college].course[i].stream, function(key, value) {
        second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
    });
}

Finding the current stream for your selected course:

// assuming cr = "btech"
for (var i = 0; i < data[college].course.length; i++) {
    if (data[college].course[i].value == cr) {
        currentStream = data[college].course[i].stream;
        break;
    }
}

$.each(currentStream, function(key, value) {
    second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
});