Подключите массив к выпадающему списку;

Question

Я пытаюсь связать массив объектов JSON с выпадающим списком, и я не понимаю, как инициализировать массив в раскрывающемся списке. Я попытался это:

function Save() { 
    colors.nextColor.push({ 
    "name": document.getElementById("name").value, 
    "rgb": document.getElementById("colordisplay").innerHTML, 
    "opacity": document.getElementById("div").style.opacity 
}); 

//pass the array into the dropdown list 

var select = document.getElementById("selectColor"); 
    for (var i = 0; i < colors[i].length; i++) { 
    var opt = colors[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 
    select.appendChild(el); 

    console.log(colors); 
} 
} 

я получаю "Uncaught TypeError: Не удается прочитать свойство 'длина' неопределенных" Вот проект jsbin.com/eXAligom/1

Answer 1

Попробуйте

var select = document.getElementById("selectColor"); 
for (var i = 0; i < colors[i].length; i++) { 
    var opt = colors[i]; 
    var el = document.createElement("option"); 
    el.innerHTML = opt; 
    el.value = opt; 
    select.appendChild(el); 
    console.log(colors); 
} 

Answer 2

Если я вас правильно понял, я бы изменил функцию Save() для:

function Save() { 
colors.push({ 
    "name": document.getElementById("name").value, 
    "rgb": document.getElementById("colordisplay").innerHTML, 
    "opacity": document.getElementById("div").style.opacity 
}); 
//pass the array into the dropdown list 
var select = document.getElementById("selectColor"); 
    var opt = colors[colors.length-1], 
     el = document.createElement("option"), 
     desc = 'N: ' + (opt.name || 'unnamed') + ' RGB: ' + opt.rgb + ' O: ' + (opt.opacity || '0') ; 
    el.innerHTML = desc; 
    el.value = desc; 
    select.appendChild(el); 
    console.log(colors);} 

изменения, произошедшие в значительной степени самоочевидны.