Verwenden Sie find() auf eingebetteten Arrays mit jQuery.

Question

Ich versuche, eingebettete Arrays durchlaufen, bis ich ein Element finden, dessen data Eigenschaft mit meiner Eingabe entspricht.

Das folgende Beispiel sollte eine Warnung ausgeben Niederlande. Wenn Sie stattdessen ein Element im ersten Array verwenden, erhalten Sie undefined, und wenn Sie eines aus der zweiten auswählen, erhalten Sie ein Objekt.

var countries = { 
 
    "EU": [ 
 
    {value: 'Malta', data: 'MT'}, 
 
    {value: 'Netherlands', data: 'NL'}, 
 
    {value: 'Austria', data: 'AT'}, 
 
    {value: 'Italy', data: 'IT'} 
 
    ], 
 
    "other": [ 
 
    {value: 'Bosnia and Herz.', data: 'BA'}, 
 
    {value: 'Jersey', data: 'JE'}, 
 
    {value: 'Belarus', data: 'BY'} 
 
    ] 
 
}; 
 

 

 
function findCountry(code) { 
 
    $.each(countries, function(key, arr) { 
 
    val = arr.find(function(obj) { 
 
     return obj.data == code; 
 
    }); 
 
    }); 
 
    return val; 
 
} 
 
    
 
alert(findCountry('NL'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

So denke ich, dass, selbst wenn das Element in der ersten Array gefunden wird, hält die each läuft. Wahrscheinlich wird stattdessen eine return-Anweisung benötigt. Aber selbst dann

var countries = { 
 
    "EU": [ 
 
    {value: 'Malta', data: 'MT'}, 
 
    {value: 'Netherlands', data: 'NL'}, 
 
    {value: 'Austria', data: 'AT'}, 
 
    {value: 'Italy', data: 'IT'} 
 
    ], 
 
    "other": [ 
 
    {value: 'Bosnia and Herz.', data: 'BA'}, 
 
    {value: 'Jersey', data: 'JE'}, 
 
    {value: 'Belarus', data: 'BY'} 
 
    ] 
 
}; 
 

 

 
function findCountry(code) { 
 
    $.each(countries, function(key, arr) { 
 
    return arr.find(function(obj) { 
 
     return obj.data == code; 
 
    }); 
 
    }); 
 
} 
 
    
 
alert(findCountry('BA'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Aber das gibt undefined die ganze Zeit. Also was fehlt mir?

Answer 1

es hier https://jsfiddle.net/yybgn2jg/1/ gesehen mit Hilfe von aktuellen Herausgefunden Antworten und einige mehr experimentieren.

var countries = { 
 
    "EU": [ 
 
    {value: 'Malta', data: 'MT'}, 
 
    {value: 'Netherlands', data: 'NL'}, 
 
    {value: 'Austria', data: 'AT'}, 
 
    {value: 'Italy', data: 'IT'} 
 
    ], 
 
    "other": [ 
 
    {value: 'Bosnia and Herz.', data: 'BA'}, 
 
    {value: 'Jersey', data: 'JE'}, 
 
    {value: 'Belarus', data: 'BY'} 
 
    ] 
 
}; 
 

 

 
function findCountry(code) { 
 
    var val; 
 
    $.each(countries, function(key, arr) { 
 
    val = arr.find(function(obj) { 
 
     return obj.data == code; 
 
    }); 
 
    // If value is found, exit early 
 
    if (val) return false; 
 
    }); 
 
    
 
    // If value found, return it, else return undefined 
 
    return val ? val.value : undefined; 
 
} 
 
    
 
console.log(findCountry('MP'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Sie müssen das Ergebnis der $.each() innerhalb der findCountry() Funktion zurückgeben. Es hat in Ihrem Beispiel keine return und ist somit undefined. Ich habe die var val auch entfernt, da Sie nichts zuweisen.

function findCountry(code) { 
    return $.each(countries, function(key, arr) { 
    return arr.find(function(obj) { 
     return obj.data == code; 
    }); 
    }); 
} 

Um nur den Namen des passenden Land zurückkehren Sie pure Javascript (kein jQuery erforderlich) und machen es effizient durch Verwendung der Object.keys() Methode eine Schleife durch das Objekt und die Array.prototype.some() Methode früh verwenden können, um zu beenden, wenn Sie feststellen, eine Übereinstimmung.

var countries = { 
    "EU": [ 
    {value: 'Malta', data: 'MT'}, 
    {value: 'Netherlands', data: 'NL'}, 
    {value: 'Austria', data: 'AT'}, 
    {value: 'Italy', data: 'IT'} 
    ], 
    "other": [ 
    {value: 'Bosnia and Herz.', data: 'BA'}, 
    {value: 'Jersey', data: 'JE'}, 
    {value: 'Belarus', data: 'BY'} 
    ] 
}; 

function findCountry(code) { 
    var name = null; 
    Object.keys(countries).some(function(key) {  // Go through EU, other, ... 
    return countries[key].some(function(country) { // Check the array under each key 
     if (country.data === code) {    // check the code against the data value 
      name = country.value;     // set the name to the value 
     } 
     return name !== null;      // a true result will exit some() 
    }); 
    });            // this some() will also exit when we get a result 
    return name;          // return the name value we found 
} 

console.log(findCountry('BA')); 

Dies wird Ausgang Bosnia and Herz. als

Answer 3

Sie haben vergessen, nur einige return-Anweisung von der Funktion find

var countries = { 
 
    "EU": [ 
 
    {value: 'Malta', data: 'MT'}, 
 
    {value: 'Netherlands', data: 'NL'}, 
 
    {value: 'Austria', data: 'AT'}, 
 
    {value: 'Italy', data: 'IT'} 
 
    ], 
 
    "other": [ 
 
    {value: 'Bosnia and Herz.', data: 'BA'}, 
 
    {value: 'Jersey', data: 'JE'}, 
 
    {value: 'Belarus', data: 'BY'} 
 
    ] 
 
}; 
 

 

 
function findCountry(code) { 
 
    var result; 
 

 
    $.each(countries, function(key, arr) { 
 
    var countryRes = arr.find(function(obj) { 
 
     return obj.data == code; 
 
    }); 
 
    if (countryRes) { 
 
     result = countryRes; 
 
    } 
 
     
 
    }); 
 

 
    return result && result.value; 
 
} 
 
    
 
alert(findCountry('JE'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>