Obtenir un objet spécifique par id à partir d'un tableau d'objets en AngularJS

Question

Je possède un fichier JSON contenant des données que je souhaite accéder sur mon site web AngularJS. Maintenant ce que je veux, c'est obtenir seulement un objet de l'array. Donc je voudrais par exemple l'élément avec l'identifiant 1.

Les données ressemblent à ceci :

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

Je voudrais charger les données avec AngularJS $http de cette manière :

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

ce qui fonctionne. Mais comment puis-je maintenant obtenir un objet de données spécifique (par id) de l'array que j'obtiens de $http.get ?

Answer 1

Utilisation de la solution ES6

Pour ceux qui lisent encore cette réponse, si vous utilisez ES6, la méthode find a été ajoutée dans les tableaux. Donc en supposant la même collection, la solution serait la suivante :

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

Je choisirais totalement cette solution maintenant, car elle est moins liée à Angular ou à tout autre framework. Javascript pur.

Solution Angular (ancienne solution)

J'ai cherché à résoudre ce problème en faisant ce qui suit :

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

Un exemple d'utilisation :

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

    // Nous filtrons le tableau par id, le résultat est un tableau
    // nous sélectionnons donc l'élément 0

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

    // Si vous voulez voir le résultat, il suffit de vérifier le log
    console.log(single_object);
}]);

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

Answer 2

Pour toute personne regardant ce vieux post, c'est actuellement la manière la plus simple de le faire. Cela nécessite simplement un filtre $filter AngularJS. C'est comme la réponse de Willemoes, mais plus courte et plus facile à comprendre.

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

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

---

ATTENTION

Comme le dit @mpgn, cela ne fonctionne pas correctement. Cela capturera plus de résultats. Exemple : lorsque vous cherchez 3, cela capturera également 23

Answer 3

Personnellement j'utilise underscore pour ce genre de trucs ... donc

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

alors "a" serait la ligne que vous vouliez de votre tableau où l'identifiant était égal à 2

Answer 4

Je veux juste ajouter quelque chose à la réponse de Willemoes. Le même code écrit directement à l'intérieur du HTML ressemblera à ceci :

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

En supposant que "results" est une variable de votre FooController et que vous voulez afficher la propriété "name" de l'élément filtré.

Answer 5

Vous pouvez utiliser ng-repeat et sélectionner les données uniquement si les données correspondent à ce que vous recherchez en utilisant ng-show par exemple:

     {{data.name}}