JSON使用命名索引访问数组对象

Question

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 1

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

Ie 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>';
});

Answer 2

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':
        var course = data[college].course;
        for(var i = 0;i<course.length;i++){
            if(course[i].name === cr){ //cr is selected option                    
                $.each(course[i].stream, function(key, value) {
            second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
            }
        }

        }); break;  
}

}); }