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

Question

假设我有这个 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>

我有这个 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"
          }
        ]
      }
    ]
  }
}

Javascript 是，

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

我正在制作一个动态下拉菜单，其中下一个下拉值是使用先前值的引用从 JSON 对象文件中获取的。正如我的这个问题( link )所建议的，我可以使用对象中的类(class)数组获取类(class)值(第二个下拉列表)。

现在，由于第二个选择菜单(类(class))中的值是动态填充的，我无法弄清楚如何采用相应的类(class)数组元素来填充流数组的下一个选择菜单选项。

由于 JSON 中的 course 属性是一个数组，因此我不知道从第二个菜单中选择哪个索引元素元素(请参阅“course”的 switch case，data[college].course[] 索引为空)。硬编码的 [0] 可以工作，但那不是动态的。

如何使用从第二个菜单中获取的值来访问stream数组。

我希望我说得清楚。提前致谢!

Answer 1

只需迭代类(class)数组即可动态获取流:

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

即使用您的代码:

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

<小时/>

查找您所选类(class)的当前流:

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