Filterelemente in JavaScript Array mit jQuery

Question

Ich habe ein JavaScript-Array wie unten, die ich filtern muss, um die richtigen untergeordneten Werte aus den Testdaten unten zu erhalten.

var arrChildOptions2 = [ 
     {Parent:'opt1',Value:'opt1',Text:'Parent1 - Child 1'}, 
     {Parent:'opt2',Value:'opt1',Text:'Parent 2 - Child 1'}, 
     {Parent:'opt2',Value:'opt2',Text:'Parent 2 - Child 2'} 
    ]; 

Die Werte werden verwendet, wie unten ein Dropdown aufzufüllen basierend auf der Änderung bei einem Elternteil Dropdown-Menüs.

$(function() { 
    $('#ddl1').change(function() { 
     $('#ddl2 option:gt(0)').remove(); 
     $('#ddl2').addItems('#ddl2', arrChildOptions2[Parent=opt2]); 
    }); 
}); 

Dabei ist additems eine Funktion, die das Array durchläuft. Problem ist, dass ich es nicht durch Eltern filtern kann, habe ich versucht mit enthält und die obigen arrChildOptions2 [Parent = opt2] aber ich kann es nicht zu filtern, ich würde es vorziehen, ein ordentliches zu finden Lösung, anstatt eine For-Schleife zu verwenden? Irgendwelche Ideen, cheers

Answer 1

Sie könnten mehr Glück mit der jQuery.grep() Funktion haben, anstatt mit Loops herumzualbern.

Diese Funktion "Findet die Elemente eines Arrays, die eine Filterfunktion erfüllen. Das ursprüngliche Array ist nicht betroffen".

Answer 2

Ja versuchen jquery grep, wie folgt aus:

arr = jQuery.grep(JSON_ARRAY, index); 

Answer 3

array.filter() existiert in Vanille JavaScript:

function isBigEnough(element) { 
    return element >= 10; 
} 
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); 
// filtered is [12, 130, 44] 

Diese Dokumentation Seite enthält eine polyfill für ältere Browser:

if (!Array.prototype.filter) 
{ 
    Array.prototype.filter = function(fun /*, thisArg */) 
    { 
    "use strict"; 

    if (this === void 0 || this === null) 
     throw new TypeError(); 

    var t = Object(this); 
    var len = t.length >>> 0; 
    if (typeof fun !== "function") 
     throw new TypeError(); 

    var res = []; 
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0; 
    for (var i = 0; i < len; i++) 
    { 
     if (i in t) 
     { 
     var val = t[i]; 

     // NOTE: Technically this should Object.defineProperty at 
     //  the next index, as push can be affected by 
     //  properties on Object.prototype and Array.prototype. 
     //  But that method's new, and collisions should be 
     //  rare, so use the more-compatible alternative. 
     if (fun.call(thisArg, val, i, t)) 
      res.push(val); 
     } 
    } 

    return res; 
    }; 
} 

Answer 4

Sie könnte jQuery.filter() Funktion verwenden, um ein neues jQuery ob zu konstruieren aus einer Teilmenge der übereinstimmenden Elemente.

var result = [ 
 
     {Parent:'opt1',Value:'opt1',Text:'Parent1 - Child 1'}, 
 
     {Parent:'opt2',Value:'opt1',Text:'Parent 2 - Child 1'}, 
 
     {Parent:'opt2',Value:'opt2',Text:'Parent 2 - Child 2'} 
 
    ]; 
 
    
 
     
 
var filteredResult = $(result).filter(function(idx) { 
 
    return result[idx].Parent === 'opt2'; 
 
});   
 
    
 
    
 
var options = $("#result-list"); 
 
$.each(filteredResult, function() { 
 
    options.append($("<option />").val(this.Value).text(this.Text)); 
 
});

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

 

 
<select id="result-list" name="select" title="List"/>