GmaSa GmaSa - 2 months ago 16
JSON Question

Orderby Values in Angularjs in a nested JSON

assuming that i have this nested json Object

{
"id":1,
"name":"AEG L76265TL",
"description":"Platzsparender und effizienter Toplader<br /> Unser Toplader L76265TL3 begeistert neben der höchsten Energieeffizienzklasse A+++ mit seiner platzsparenden Bauweise. Dennoch bietet er mit 6 Kg Fassungsvermögen ordentlich Platz für Ihren Wäscheberg. Dabei kommt aber die Pflege Ihre Wäsche auf keinen Fall zu kurz. Mit der OptiSense Mengenautomatik und der großen ProTex Schontrommel werden die Fasern Ihres Lieblingsstücks mit besonderer Sorgfalt und Pflege behandelt.<br /> Sanftes Öffnen, mühelos und bequem<br /> Das zweiteilige Soft-Opening System ermöglicht einen einfachen Zugang zu der eigentlichen Trommel. Auf Tastendruck öffnet sich der Gerätedeckel von selbst zum mühelosen Be- und Entladen. Alle AEG Toplader sind darüber hinaus mit einer Sanft-Öffnenden-Trommel ausgestattet. Damit schwingen die Trommeldeckel auf Knopfdruck sanft und langsam nach oben. ",
"image":"http://www.aeg.de/Additions/ImageResize/ImageExternal.aspx?src=http%3a%2f%2fwww.electrolux.im%2fproducts%2fXMLLARGERIMAGE%2fPSAAWM110P000146.png&width=335&height=335&interpolation=HighQualityBicubic",
"manufacturer":"AEG",
"retailers":[
{
"id":1,
"source":"https://www.otto.de/p/aeg-waschmaschine-toplader-l76265tl3-aplusplusplus-6-kg-1200-u-min-279623806/#variationId=279628127-M24",
"price":549.0,
"retailer_name":"Otto"
},
{
"id":2,
"source":"http://www.green-point.de/113-Waschmaschinen-und-Trockner/115-Toplader-Waschmaschinen/524-AEG/1003588-AEG-L76265TL3-Waschmaschine-Toplader-A.html?from=psmido",
"price":592.0,
"retailer_name":"Green-Point"
}
],
"attributes":[
{
"id":1,
"worth":"Toploader",
"attribute_description":"Waschmaschinen können als Toplader oder als Frontlader gebaut werden.",
"attribute_name":"Bauart"
},
{
"id":2,
"worth":"A+++",
"attribute_description":"Die Güteklasse sagt aus, wie gut die Energieeffizienz ist.",
"attribute_name":"Energieeffizienz"
},
{
"id":3,
"worth":"6 kg",
"attribute_description":"In eine Waschmaschine können zwischen versch. viele Kilogramm an Wäsche gefüllt werden.",
"attribute_name":"Füllmenge"
}
],
"weights":[
{
"source":"http://www.aeg.de/Products/W%C3%A4schepflege/Waschautomaten/Toplader/L76265TL3/",
"explanatory_note":"Laut Hersteller hat die Waschmaschine AEG L76265TL3 die Energieeffizienzklasse A+++.* Entsprechend der fairNETZ-Bewertungsanleitung für den Wert \"Energieeffizienz\" ergibt A+++ die fairNETZ-Note: +2 (sehr gut).",
"evaluation_method":"https://docs.google.com/document/d/182HeANGNjRj1_MuU28ZOnTMS5JjBpjRmGME8Dm2pofo/edit",
"indicator_name":"Energieeffizienz",
"indicator_value":2
},
{
"source":"https://www.test.de/Waschmaschinen-im-Test-4296800-tabelle/suche/",
"explanatory_note":"Die Stiftung Warentest hat die Waschmschiene AEG L76265TL3 im 10-Jahres-Dauerprüfung mit “sehr gut” bewertet. Entsprechend der fairNETZ-Bewertungsanleitung für den Wert \"Langlebigkeit\" ergibt die Bewertung “sehr gut” der Stiftung Warentest in der 10-Jahres-Dauerprüfung die fairNETZ-Note: +2 (sehr gut).",
"evaluation_method":"https://docs.google.com/document/d/11432PO-okihK2cgbbP3m7f9_q7kO5xN6TEujfqdjQDw/edit",
"indicator_name":"Langlebigkeit",
"indicator_value":2
},
{
"source":"https://www.test.de/Waschmaschinen-im-Test-4296800-tabelle/suche/,",
"explanatory_note":"Die Stiftung Warentest hat die Waschmschiene AEG L76265TL3 in Bezug auf Umwelteigenschaften mit “gut” bewertet.* Entsprechend der fairNETZ-Bewertungsanleitung für den Wert \"Umwelteigenschaften\" ergibt die Bewertung “gut” der Stiftung Warentest die fairNETZ-Note: +1 (gut).",
"evaluation_method":"https",
"indicator_name":"Umwelteigenschaften",
"indicator_value":1
},
{
"source":"https://docs.google.com/document/d/1enYtegDX315LvZ4ELHrR5WmPOR4VwVGDBSBV7O-kTp0/edit",
"explanatory_note":"Die Stiftung Warentest hat die Waschmschiene AEG L76265TL3 mit dem Qualitätsurteile “gut” bewertet.* Entsprechend der fairNETZ-Bewertungsanleitung für \"Testergebnisse\" ergibt das Qualitätsurteil “gut” der Stiftung Warentest die fairNETZ-Note: +1 (gut).",
"evaluation_method":"https://docs.google.com/document/d/1enYtegDX315LvZ4ELHrR5WmPOR4VwVGDBSBV7O-kTp0/edit",
"indicator_name":"Testergebnisse",
"indicator_value":1
}
],
"product_url":"http://www.aeg.de/Products/W%C3%A4schepflege/Waschautomaten/Toplader/L76265TL3/"


},
https://jsfiddle.net/4n7jn248/
how can i apply an order by filtler in the attributes ?
i cant find a way to order my Products with their Attributes. For example i would have three 3 paramaters , each one has 3 values (with checkboxes)

Answer

Use a custom filter for filtering when your data structure has a nested Array...

with some sample data like yours:

$scope.products = [{
    manufacturer: 'AEG',
    name: 'Product A',
    attributes: [{
            worth: 'Toploader',
            attribute_name: 'Bauart'
            // ...
        }, {
            // more attributes ...
        }]
}, {
    // more products ...
}];

and from your description you have 3 filter criteria that might be modeled against a filters JSON object

something like:

<label><input type="checkbox" ng-model="filters.toploaders" /> Toploaders</label>

and

$scope.filters = {
    toploaders: true
}

Now create a custom filter that accepts a product and returns true to include, false to exclude:

$scope.customFilter = function(product) {
    for (var i in product.attributes) {
        var attribute = product.attributes[i];

        if ($scope.filters.toploaders && attribute.worth === 'Toploader') {
            return true;
        }
        // other criteria...
    };

    return false;
}

finally in your ng-repeat element specify your customFilter:

<div class="..." ng-repeat="product in products | filter: customFilter">...</div>

jsfiddle

Comments