JSON Zugriff auf Array-Objekte einen benannten Index mit

Question

Angenommen, ich habe dieses 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> 

ich dieses JSON haben,

{ 
    "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" 
      } 
     ] 
     } 
    ] 
    } 
} 

Das Javascript ist,

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

ich mache dynamisches Dropdown-Menü, in dem die nächsten Dropdown-Werte aus der JSON-Objektdatei abgerufen werden, wobei die Referenz der vorherigen Werte verwendet wird. Wie von meiner Frage (link) vorgeschlagen, bin ich in der Lage, den Wert des Kurses (zweites Dropdown) unter Verwendung des Kursarrays in dem Objekt zu erhalten.

Jetzt, da die Werte im zweiten Select-Menü (Kurs) dynamisch gefüllt sind, kann ich nicht herausfinden, wie man das entsprechende Course Array-Element zum Füllen der nächsten Select-Menüoptionen für Stream-Array verwendet.

Da die Kurseigenschaft in JSON ein Array ist, weiß ich nicht, welches Indexelement aus dem zweiten Menü ausgewählt wird (siehe den Schalter für 'Kurs', der data[college].course[] Index ist leer). Die hardcoded [0] funktioniert, aber das ist dann nicht dynamisch.

Wie Zugriff auf die stream-Array mit den Werten natürlich aus dem zweiten Menü ergriffen.

Ich hoffe, ich bin klar. Danke im Voraus!

Answer 1

iterieren einfach durch Anordnung von Kursen den Strom dynamisch zu bekommen:

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

D.h. mit Ihrem 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>'; 
    }); 
} 

---

den aktuellen Stream für Ihren gewählten Kurs zu finden:

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

}); }