[SOLUCIONADO] Iteración con javascript y JSON crea elementos "undefined"

[Fleon]

Hola a todos, tengo un archivo .js un script que me llena un select iterando un arreglo JSON todo muy bien, pero tengo un inconveniente y es que me crea más elementos con valores "undefined", he aquí el código:

Código Javascript:

var librerias = {
  "data":
  [
        {
          "main": "Types",        
          "text":"Tipos de Datos",
          "child":[
              {"display": "Enteros, Ordinales", "value": "Ints"},
              {"display": "Puntos Flotantes", "value": "Floats"},
              {"display": "Cadenas, Char", "value": "Strings"},
              {"display": "Punteros", "value": "Pointers"},
              {"display": "Otros", "value": "Otros"}
          ]
          
        },
        {
          "main": "Strings",        
          "text": "Cadenas y Char",
          "child":[
            {"display": "Operaciones", "value": "Calcs" },
            {"display": "Convertir desde", "value": "ConvsFrom" },
            {"display": "Convertir hacia", "value": "ConvsTo" },
            {"display": "Presentación", "value": "Display" }
          ]
          
        },
        {
          "main": "PgmStruct",        
          "text": "Estructura del Programa",
          "child":[
            {"display": "Control del Programa", "value": "Control" },
            {"display": "Datos del Programa", "value": "Data" },
            {"display": "Ciclos", "value": "Loops" },
            {"display": "Lógica", "value": "Logic" },
            {"display": "Orientado a Objetos", "value": "Object" }
          ]
          
        },
        {
          "main": "Numbers",        
          "text": "Números y Conjuntos",
          "child":[
            {"display": "Cálculos", "value": "Calcs" },
            {"display": "Convertir Desde", "value": "ConvsFrom" },
            {"display": "Convertir Hacia", "value": "ConvsTo" },
            {"display": "Trigonometría", "value": "Trig" },
            {"display": "Números por defecto", "value": "Values" },
            {"display": "Presentación", "value": "Display" }
          ]
          
        },
        {
          "main": "Options",        
          "text": "Opciones",
          "child":[
            {"display": "Opciones de Control", "value": "Control" },
            {"display": "Opciones de Datos", "value": "Data" }
          ]
          
        },      
        {
          "main": "DatesAndTimes",        
          "text": "Fechas y Tiempos",
          "child":[
            {"display": "Cálculos", "value": "Calcs" },
            {"display": "Convertir Desde", "value": "ConvsFrom" },
            {"display": "Convertir Hacia", "value": "ConvsTo" },
            {"display": "Valores", "value": "Values" },
            {"display": "Presentación", "value": "Display" }
          ]
          
        },
        {
          "main": "Files",        
          "text": "Archivos",
          "child":[
            {"display": "Operaciones", "value": "Control" },
            {"display": "Acceso de Datos", "value": "Data" },
            {"display": "Manejo", "value": "Strings" }
          ]
          
        },  
 ]      
}
 
//Cargamos el select principal
for (var i in librerias.data) {
    var elem = document.createElement("option");
    elem.value = librerias.data[i].main;
    elem.innerHTML = librerias.data[i].text;
    document.getElementById("main_selection").appendChild(elem)
}
 
//Aqui cargamos el segundo select de acuerdo a la selección del primero
document.getElementById("main_selection").addEventListener("change", function () {
    document.getElementById("sub_selection").innerHTML = "";
    var rtl = document.getElementById("main_selection").options[document.getElementById("main_selection").selectedIndex].value;
    if (rtl === "Seleccione Por Favor") {
        var elem = document.createElement("option");
        elem.value = "0";
        elem.innerHTML = "Seleccione Por Favor";
        document.getElementById("sub_selection").appendChild(elem);
    }
    for (var i in librerias.data) {
        if (librerias.data[i].main === rtl) {
            for (var a = 0; a < librerias.data[i].child.length; a++) {
                var elem = document.createElement("option");
                elem.value = librerias.data[i].child[a].value;
                elem.innerHTML = librerias.data[i].child[a].display;
                document.getElementById("sub_selection").appendChild(elem);
            }
        }
    }
});
 

El resutado es el siguiente:



Lo curioso es que lo he probado en jsFiddle.net y no sucede eso.

¿Alguna idea?.

[Fleon]

He resuelto cambiando el siguiente código:

Código Javascript:

for (var i in librerias.data) {
    var elem = document.createElement("option");
    elem.value = librerias.data[i].main;
    elem.innerHTML = librerias.data[i].text;
    document.getElementById("main_selection").appendChild(elem);
}
 

Por:

Código Javascript:

for (var i = 0; i < librerias.data.length; i++) {
    var elem = document.createElement("option");
    elem.value = librerias.data[i].main;
    elem.innerHTML = librerias.data[i].text;
    document.getElementById("main_selection").appendChild(elem);
}
 

Ya no me crea esos elementos undefined.

Saludos.