title: dynamic way to access json array elements
body: <p>so i have json array</p>
  
  <pre><code>data = '[{"beatles": [
                  {"name":"Paul McCartney","value": "http://www.paulmccartney.com"},
                  {"name": "John Lennon","value": "http://www.johnlennon.it"},
                  {"name":"George Harrison","value": "http://www.georgeharrison.com"},
                  {"name": "Ringo Starr","value": "http://www.ringostarr.com"}],
             "stones": [
                  {"name": "Mick Jagger","value": "http://www.mickjagger.com"},
                  {"name": "Keith Richards","value": "http://www.keithrichards.com"}]'
  </code></pre>
  
  <p>and i have two dropdown lists</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
       &lt;head&gt;
            &lt;title&gt;&lt;/title&gt;
            &lt;script src="rockbands.json"&gt;&lt;/script&gt;
            &lt;script src="script.js"&gt;&lt;/script&gt;
       &lt;/head&gt;
       &lt;body onload="getBands()"&gt;
            &lt;select id="bands" onchange="getNames(this.value)"&gt;&lt;/select&gt;
            &lt;select id="names" &gt;&lt;/select&gt;
  
       &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>so i load the dropdownlist with ID "bands" with this JS Code</p>
  
  <pre><code>function getBands() {
      var root = JSON.parse(data)
      var bandsBox = document.getElementById("bands")
      for(i in root[0]) {
          var option = document.createElement("option")
          option.text = i
          bandsBox.appendChild(option)
      }
  }
  </code></pre>
  
  <p>what i want to do is populate the other dropdown list with ID "names"
  with the array element "name" based on the selection in the first dropdownlist for example if i chose beatles it would load all names in beatles</p>
  
  <p>i could access it with something like root[0].beatles[1].name but i want a dynamic way to access them thanks</p>