undefined zeigt in Optionen auf

Question

In JS

var vehicleData = [{year: 2015, make: "Audi", model: "A4"}, 
{year: 2014, make: "Benz", model: "c2000"}, 
{year: 2015, make: "Maruti", model: "s-cross"}, 
{year: 2015, make: "Maruti", model: "WagonR"} 
]; 
var uniqueNames=[]; 

for(var i = 0; i<vehicleData.length; i++){ 
buildDropdownYear(i); 
} 

function buildDropdownYear(n) { 
var yearSelect = document.getElementById("selectMe"); 
var drop1 = document.createElement("option"); 
var carYear = buildCtrl(n, uniqueNames,"option"); 
yearSelect.appendChild(carYear); 
} 

function buildCtrl(n, data, ctrl){ 
for(var i = 0; i< vehicleData.length; i++){ 
if(uniqueNames.indexOf(vehicleData[i].year) === -1){ 
    uniqueNames.push(vehicleData[i].year);   
} 
} 
for(i = 0; i< uniqueNames.length; i++){  
console.log(uniqueNames[i]);  
} 

var item = document.createElement(ctrl); 
if(data){ 
    item.innerHTML = data[n]; 
} 
return item; 
} 

Nach der Ausgabe undefiniert ist in Drop-Down kommen. Ich möchte einzigartige Werte im Dropdown-Bereich aus dem Jahr [von Json Daten].

Mein Plunker Code ist: http://plnkr.co/edit/fMufqCctzHe4Umbpu6Ag?p=preview

Answer 1

Sie haben hier einige Probleme, das wollen nur noch schlimmer, wenn Sie die anderen Drop-Down-Menüs beginnen, Sie immer zu abstrahieren, so viel wie möglich aussehen sollte, so dass Sie können Sie Ihre Funktion (en) über und über:

Das tut, was Sie in einer Funktion wollen: NEW PLUNKER

var vehicleData = [{year: 2015, make: "Audi", model: "A4"}, 
    {year: 2014, make: "Benz", model: "c2000"}, 
    {year: 2016, make: "Maruti", model: "s-cross"}, 
    {year: 2015, make: "Maruti", model: "WagonR"} 
]; 

function buildDD(id){ 
    var selector = document.getElementById(id); 

    var newDataArray = vehicleData.map(function(d) { 
    return d[id] 
    }) 
    var uniques = newDataArray.reduce(function(a, b) { 
    if (a.indexOf(b) === -1) { 
     a.push(b); 
    } 
    return a; 
    }, []); 

    uniques.forEach(function(el) { 
    var opt = document.createElement('option'); 
    opt.innerHTML = el; 

    selector.appendChild(opt) 
    }) 
    return newDataArray; 
} 

buildDD('year') 
buildDD('make') 
buildDD('model')