Holen Sie sich ein bestimmtes Objekt nach ID aus einem Array von Objekten in AngularJS

Lesezeit: 5 Minuten

Benutzer-Avatar
Mondli

Ich habe eine JSON-Datei mit einigen Daten, auf die ich auf meiner AngularJS-Website zugreifen möchte. Jetzt möchte ich nur ein Objekt aus dem Array abrufen. Also möchte ich zum Beispiel Artikel mit der ID 1.

Die Daten sehen so aus:

{ "results": [
    {
        "id": 1,
        "name": "Test"
    },
    {
        "id": 2,
        "name": "Beispiel"
    },
    {
        "id": 3,
        "name": "Sample"
    }
] }

Ich möchte die Daten mit der AngularJS $http-Funktionalität wie folgt laden:

$http.get("data/SampleData.json");

was funktioniert. Aber wie kann ich jetzt ein bestimmtes Datenobjekt (nach ID) aus dem Array erhalten, von dem ich komme? $http.get ?

Vielen Dank im Voraus für Ihre Hilfe.

Grüß Marc

  • Hast du es selbst ausprobiert? Wenn ja, können wir sehen, was Sie sich ausgedacht haben?

    – simonlchilds

    25. Oktober 2013 um 12:38 Uhr

  • Nun, ich habe keine Ahnung, welcher Weg mit AngularJS der beste wäre. Was ich nicht mag, ist, über das Array zu iterieren und ein Gleichheitszeichen für die ID zu verwenden. Vielleicht gibt es einen besseren Weg?

    – Mondli

    25. Oktober 2013 um 12:40 Uhr

  • Sie sollten sich für eine solche Verarbeitung auf underscorejs oder ähnliche Bibliotheken verlassen. AngularJS ist ein MVVM-Framework und hat möglicherweise keine API dafür.

    – Vijay Pande

    25. Oktober 2013 um 12:46 Uhr

  • @marcbaur – Sie müssen das Array iterieren. Selbst wenn Sie Unterstriche oder ähnliches verwenden, iterieren die Funktionen hinter den Kulissen nur.

    – Adam

    25. Oktober 2013 um 13:00 Uhr

  • Bitte Winkelcode dafür hinzufügen

    – Ankush Kondhalkar

    15. Juli 2015 um 15:21 Uhr

Benutzer-Avatar
Willemoes

Mit ES6-Lösung

Für diejenigen, die diese Antwort noch lesen, wenn Sie ES6 verwenden find Methode wurde in Arrays hinzugefügt. Unter der Annahme derselben Sammlung wäre die Lösung:

const foo = { "results": [
    {
        "id": 12,
        "name": "Test"
    },
    {
        "id": 2,
        "name": "Beispiel"
    },
    {
        "id": 3,
        "name": "Sample"
    }
] };
foo.results.find(item => item.id === 2)

Ich würde mich jetzt total für diese Lösung entscheiden, da sie weniger an eckige oder andere Rahmen gebunden ist. Reines Javascript.

Winkellösung (alte Lösung)

Ich wollte dieses Problem lösen, indem ich Folgendes tat:

$filter('filter')(foo.results, {id: 1})[0];

Ein Anwendungsbeispiel:

app.controller('FooCtrl', ['$filter', function($filter) {
    var foo = { "results": [
        {
            "id": 12,
            "name": "Test"
        },
        {
            "id": 2,
            "name": "Beispiel"
        },
        {
            "id": 3,
            "name": "Sample"
        }
    ] };

    // We filter the array by id, the result is an array
    // so we select the element 0

    single_object = $filter('filter')(foo.results, function (d) {return d.id === 2;})[0];

    // If you want to see the result, just check the log
    console.log(single_object);
}]);

Plunker: http://plnkr.co/edit/5E7FYqNNqDuqFBlyDqRh?p=preview

  • Eigentlich würde ich denken, dass es geht! Nachdem Sie das Array abgerufen haben, können Sie die Funktion $filter verwenden, um das Element mit der richtigen ID herauszufiltern.

    – Fluch

    24. Juni 2014 um 19:39 Uhr


  • Dies sollte die akzeptierte Antwort sein. Ich hatte die gleiche Frage in meinem Kopf und diese Antwort ist die einzige, die vorhandenes AngularJS verwendet und das Rad nicht neu erfindet. Und ja, es funktioniert.

    – Zoran P.

    3. Juli 2014 um 14:17 Uhr

  • +1 dafür, dass dies die akzeptierte Antwort ist. Beste Lösung mit Winkelbibliotheken.

    – Meki

    7. Oktober 2014 um 10:08 Uhr

  • Plunker mit Filter in einem Ausdruck: plnkr.co/edit/yc0uZejGqWTcUVKvI7Tq?p=Vorschau

    – Aaron Roller

    5. Juni 2015 um 8:28 Uhr

  • Beachten Sie, dass Filter standardmäßig nach Groß- und Kleinschreibung suchen. Also kehrt (foo.results, {id: 2}) zurück [{id: 12}, {id: 2}]{id:222}]aber (foo.results, function (d) {return d.id === 2;}) gibt zurück [{id: 2}]

    – Ryan.lay

    26. Juli 2015 um 4:31 Uhr


Benutzer-Avatar
Tillmann32

Für jeden, der sich diesen alten Beitrag ansieht, ist dies derzeit der einfachste Weg. Es erfordert nur ein AngularJS $filter. Es ist wie Willemoes Antwort, aber kürzer und leichter zu verstehen.

{ 
    "results": [
        {
            "id": 1,
            "name": "Test"
        },
        {
            "id": 2,
            "name": "Beispiel"
        },
        {
            "id": 3,
            "name": "Sample"
        }
    ] 
}

var object_by_id = $filter('filter')(foo.results, {id: 2 })[0];
// Returns { id: 2, name: "Beispiel" }

WARNUNG

Wie @mpgn sagt, das funktioniert nicht richtig. Dadurch werden mehr Ergebnisse erzielt. Beispiel: Wenn Sie 3 suchen, wird dies auch 23 fangen

  • auch Fang-ID: 24 12 222 2002 usw

    – mpgn

    22. September 2016 um 17:33 Uhr

  • Ich würde denken, dass die [0] würde dazu führen, dass es das erste Ergebnis zurückgibt, das es aus der Sammlung findet, also würde es nur funktionieren, wenn Ihre Sammlung sortiert ist und das Objekt, nach dem Sie suchen, das erste ist, das es während seiner Iteration findet. Z.B. wenn es eine id:12 gibt, die vor id: 2 kommt, würde es id: 12 zurückgeben.

    – Roddy von den gefrorenen Erbsen

    8. November 2017 um 18:22 Uhr

Ich persönlich benutze Unterstriche für solche Sachen … also

a = _.find(results,function(rw){ return rw.id == 2 });

dann wäre “a” die gewünschte Zeile Ihres Arrays, in der die ID gleich 2 war

  • ich wirklich lieben unterstreichen, aber ist es schlimmer, eine andere JavaScript-Bibliothek zu haben?

    – echtfafa

    26. Juli 2014 um 3:09 Uhr


  • Beachten Sie, dass find kann möglicherweise mehrere Objekte zurückgeben. Da wir nur einen wollen, können wir ihn verwenden findWhere die nur das erste Vorkommen zurückgibt (von dem wir wissen, dass es das einzige Vorkommen ist), z a = _.findWhere(results, {id: 2}).

    – gregolzow

    18. September 2014 um 16:47 Uhr

Benutzer-Avatar
Ena

Ich möchte nur etwas zu Willemoes Antwort hinzufügen. Derselbe Code, der direkt in den HTML-Code geschrieben wird, sieht folgendermaßen aus:

{{(FooController.results | filter : {id: 1})[0].name }}

Angenommen, “Ergebnisse” ist eine Variable Ihres FooControllers und Sie möchten die Eigenschaft “Name” des gefilterten Elements anzeigen.

Benutzer-Avatar
James Kuta Simiyu

Sie können verwenden ng-repeat und wählen Sie Daten nur aus, wenn die Daten mit dem übereinstimmen, wonach Sie suchen ng-show
zum Beispiel:

 <div ng-repeat="data in res.results" ng-show="data.id==1">
     {{data.name}}
 </div>    

  • Wenn Ihr Array mehr als eine triviale Anzahl von Elementen enthält, werden dadurch viele unnötige Bereiche erstellt, die Ihre Anwendung verlangsamen können.

    – Der DIMM-Reaper

    2. September 2015 um 18:37 Uhr

Sie können einfach Ihr Array durchlaufen:

var doc = { /* your json */ };

function getById(arr, id) {
    for (var d = 0, len = arr.length; d < len; d += 1) {
        if (arr[d].id === id) {
            return arr[d];
        }
    }
}

var doc_id_2 = getById(doc.results, 2);

Wenn Sie diese unordentlichen Schleifen nicht schreiben möchten, können Sie die Verwendung von in Betracht ziehen unterstrich.js oder Lo-Dash (Beispiel in letzterem):

var doc_id_2 = _.filter(doc.results, {id: 2})[0]

  • Wenn Ihr Array mehr als eine triviale Anzahl von Elementen enthält, werden dadurch viele unnötige Bereiche erstellt, die Ihre Anwendung verlangsamen können.

    – Der DIMM-Reaper

    2. September 2015 um 18:37 Uhr

Benutzer-Avatar
Ali Adravi

Wenn Sie die Liste von Elementen wie Stadt auf der Grundlage der Bundesstaats-ID wünschen, verwenden Sie diese

var state_Id = 5;
var items = ($filter('filter')(citylist, {stateId: state_Id }));

1226880cookie-checkHolen Sie sich ein bestimmtes Objekt nach ID aus einem Array von Objekten in AngularJS

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy