Javascript forEach/.map zeigt undefined

Question

Wenn ich diesen Code in Chromes Quellen-Tool in Inspect ausführen, heißt es Nummer = undefined für Zeile 7 (groceryList.forEach (Funktion (Nummer) {). Die Argumente werden ordnungsgemäß übergeben und wenn ich einen console.log für jedes Element zu tun zeigt es richtig. das gleiche Problem mit dem kommentierten aus .map Schnitt, der die gleiche Sache wie foreach tut.

Kann mir jemand sagen, was ich falsch mache?

//BUSINESS LOGIC 
 

 
var alphabatize = function(item1,item2,item3,item4){ 
 
    groceryList = [item1,item2,item3,item4]; 
 
    groceryList.sort(); 
 
    upperGroceryList = [] 
 
    groceryList.forEach(function(number) { 
 
    console.log(number); 
 
    upperGroceryList.push(number.toUpperCase()); 
 
    }); 
 
    /* upperGroceryList = groceryList.map(function(grocery) { 
 
    console.log(grocery); 
 
    return grocery.toUpperCase(); 
 
    }); */ 
 
    return groceryList; 
 
    return upperGroceryList; 
 
}; 
 

 

 

 
// FRONT END 
 

 
$(document).ready(function() { 
 
    $("form#items-form").submit(function(event) { 
 
    event.preventDefault(); 
 
    var item1 = $("input#item1").val(); 
 
    var item2 = $("input#item2").val(); 
 
    var item3 = $("input#item3").val(); 
 
    var item4 = $("input#item4").val(); 
 
    alphabatize(item1,item2,item3,item4); 
 
    upperGroceryList.forEach(function(currentItem) { 
 
     $("#display-list ul").append("<li>" + currentItem + "</li>"); 
 
    }); 
 
    }); 
 
})

Answer 1

Sie können nicht zwei Rückgabeanweisungen von einer Funktion haben. Stattdessen können Sie ein Objekt zurückgeben beide Arrays wie enthalten:

var obj = { 
     groceryList : groceryList, 
     upperGroceryList : upperGroceryList 
    }; 

    return obj; 

Dann können Sie auf diese Weise verwenden:

var arr = alphabatize(item1, item2, item3, item4); 

    arr.upperGroceryList.forEach(function(currentItem) { 
    $("#display-list ul").append("<li>" + currentItem + "</li>"); 
}); 

Answer 2

Es gibt hier mehrere Dinge. Ihre Funktionsvariablen sind niemals definiert.

var alphabatize = function(item1,item2,item3,item4){ 
        var groceryList = [item1,item2,item3,item4], //use comma to define more than one with one var statement. 
         upperGroceryList = []; //end var declaration with semicolon. 

         groceryList.sort(); 

         groceryList.forEach(function(number) { 
             console.log(number); 
             upperGroceryList.push(number.toUpperCase()); 
         }); 
    /* 
    You cannot have return more than once in a function. 
    return groceryList; 
    return upperGroceryList; 
    */ 
}; 

Auch Ihre UpperGroceryList forEach Funktion sollte innerhalb der Alphabatize-Funktion sein.

so sollte die vollständige Alphabatize-Funktion so aussehen.

var alphabatize = function(item1,item2,item3,item4){ 
          var upperGroceryList = [], 
           groceryList = [item1,item2,item3,item4]; 

          groceryList.sort(); 

          groceryList.forEach(function(number) { 
           console.log(number); 
           upperGroceryList.push(number.toUpperCase()); 
          }); 

          upperGroceryList.forEach(function(currentItem) { 
           $("#display-list").append("<li>" + currentItem + "</li>"); 
          }); 
          }; 

und unsere Submit-Funktion sieht so aus.

$(function(){ 
      $("#items-form").submit(function(event) { 
       event.preventDefault(); 
       var item1 = $("#item1").val(); 
       var item2 = $("#item2").val(); 
       var item3 = $("#item3").val(); 
       var item4 = $("#item4").val(); 
       alphabatize(item1,item2,item3,item4); 

      }); 

});