jQuery - Überprüfen, ob Array leer ist oder Attribute hat

Question

Ich bekomme ein Array von Strings, und wenn das Array Elemente hat, möchte ich eine Sache tun, und wenn nicht, möchte ich das andere tun. Ich bin nicht sicher, wie man überprüft, ob das Array leer ist. Auch wenn ich meinen Code im Chrome-Debugger durchtrete, auch wenn das Array Elemente enthält, ist die Länge immer noch 0, daher kann ich formErrors.length > 0 nicht verwenden.

Hier ist mein Code für die Fehler. Dies funktioniert gut und gibt ein Array von Fehlerstrings oder ein leeres Array:

var formErrors = validateFormData(formData); 

function validateFormData(data) { 
    var errors = []; 

    if (data["title"].length == 0) { 
     errors["title"] = "Project title required"; 
    } 
    if (data["client"].length == 0) { 
     errors["client"] = "Client name required"; 
    } 
    if (data["date"].length == 0) { 
     errors["date"] = "Date required"; 
    } else if (!isValidDateFormat(data["date"])) { 
     errors["date"] = "Date format invalid - Format: dd/mm/yyyy"; 
    } 
    if (data["status"] == "") { 
     errors["status"] = "Please select current status for this project"; 
    } 
    if (data["type"] == "") { 
     errors["type"] = "Please select a project type"; 
    } 
    if (data["extras"].length == 0) { 
     errors["extras"] = "You must select at least one extra for this project"; 
    } 

    return errors; 
} 

Dann möchte ich eine Sache tun, wenn es keine Fehler gibt und eine andere, wenn es. Aber das ist das bisschen, das für mich nicht funktioniert.

if (formErrors !== {}) { 
     displayFormErrors(formErrors); 
     event.preventDefault(); 
    } 
    else { 

     clearForm(); 
    } 

Ich habe mehrere Möglichkeiten ausprobiert und nichts hat bisher funktioniert. Jede Hilfe wird geschätzt, danke!

EDIT

ich nicht die .length auf dem Array verursachen die Länge ist 0, auch wenn es Daten hat verwenden können. zu tun

Screenshot of chrome debugger

ich etwas verwirrt bin, was die Leute traurig fragen, ich bin hier kein Experte ist mein vollständiger Code ein besseres Verständnis dafür zu bekommen, was ich versuche.

$(document).ready(function() { 

$('#submit').on("click", onSubmitForm); 

function onSubmitForm(event) { 
    clearErrorMessages(); 

    var formData = getFormData(); 
    var formErrors = validateFormData(formData); 

    if (formErrors) { 
     displayFormErrors(formErrors); 
     event.preventDefault(); 
    } 
    else { 

     clearForm(); 

     // Do other stuff 

    } 
} 

function clearForm() { 
    $('#title').val(""); 
    $('#client').val(""); 
    $('#date').val(""); 

    $('#status').val("planning"); 

    $('#description').val(""); 

    $('.type').prop('checked', false); 
    $('.extra').prop('checked', false); 

    $('#title').focus(); 
} 

function clearErrorMessages() { 
    $(".uk-text-danger").html(""); 
} 

function getFormData() { 
    var data = []; 

    data["title"] = $('#title').val(); 
    data["client"] = $('#client').val(); 
    data["date"] = $('#date').val(); 

    data["status"] = $('select#status option:selected').val(); 

    data["description"] = $('#description').val(); 

    if ($("input[name='type']:checked").length > 0) { 
     data["type"] = $("input[name='type']:checked").val(); 
    } 
    else { 
     data["type"] = ""; 
    } 

    data["extras"] = []; 
    $.each($("input[name='extras[]']:checked"), function(index, radio) { 
     data["extras"].push(radio.value); 
    }); 

    return data; 
} 

function validateFormData(data) { 
    var errors = []; 

    if (data["title"].length == 0) { 
     errors["title"] = "Project title required"; 
    } 
    if (data["client"].length == 0) { 
     errors["client"] = "Client name required"; 
    } 
    if (data["date"].length == 0) { 
     errors["date"] = "Date required"; 
    } else if (!isValidDateFormat(data["date"])) { 
     errors["date"] = "Date format invalid - Format: dd/mm/yyyy"; 
    } 
    if (data["status"] == "") { 
     errors["status"] = "Please select current status for this project"; 
    } 
    if (data["type"] == "") { 
     errors["type"] = "Please select a project type"; 
    } 
    if (data["extras"].length == 0) { 
     errors["extras"] = "You must select at least one extra for this project"; 
    } 

    return errors; 
} 

function displayFormErrors(errors) { 
    for (var field in errors) { 
     var errorElementId = field + "Error"; 
     $('#' + errorElementId).html(errors[field]); 
    } 
} }); 

Tut mir leid, wenn das zu viel ist, bin ich mir nicht sicher, was ich sonst tun soll.

Answer 1

var errors = {}; innerhalb der validateFormData function. Und dann vergleichen Sie das Objekt so.

if (JSON.stringify(formErrors) !== '{}') { //do something}else { //do something}

Answer 2

Ein leeres Array, String oder Objekt ist "falsy" in JavaScript.

Das heißt, Sie können das Array, String oder Objekt direkt in die If-Bedingung übergeben und es wird ausgeführt, je nachdem, ob etwas da ist oder nicht.

if ([]) { 
    // this will never run 
} 
if ('') { 
    // this won't run either 
} 
if ({}) { 
    // nor will this 
} 

Answer 3

Wo Verifizieren Sie, wenn die formErrors leer ist? Diese Überprüfung (das if-else) sollte innerhalb der Funktion sein, die das Formular übermittelt.

auch versuchen, mit:

if (formErrors.length> 0)

statt: (! Formerrors == {})

wenn