Obtenir un object JSON spécifique par ID à partir d’un tableau JSON dans AngularJS

J’ai un fichier JSON contenant des données auxquelles je souhaite accéder sur mon site Web AngularJS. Maintenant, ce que je veux, c’est obtenir un seul object du tableau. Donc, je voudrais par exemple Item avec id 1.

Les données ressemblent à ceci:

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

Je souhaite charger les données avec la fonctionnalité AngularJS $ http comme ceci:

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

qui fonctionne. Mais comment puis-je maintenant obtenir un object de données spécifique (par identifiant) du tableau que je reçois de $http.get ?

Merci d’avance pour votre aide.

Greets Marc

La seule façon de faire est de parcourir le tableau. De toute évidence, si vous êtes sûr que les résultats sont classés par ID, vous pouvez faire une recherche binary

Utiliser la solution ES6

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

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

Je vais totalement pour cette solution maintenant, car elle est moins liée à un cadre angular ou à tout autre cadre. Javascript pur.

Solution angular (ancienne solution)

J’ai cherché à résoudre ce problème en procédant comme suit:

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

Un exemple de cas d’utilisation:

 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

Pour ceux qui regardent ce vieux post, c’est le moyen le plus simple de le faire actuellement. Il ne nécessite qu’un $filter AngularJS $filter . C’est comme Willemoes répondre, mais plus court 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]; // Returns { id: 2, name: "Beispiel" } 

ATTENTION

Comme @mpgn le dit, cela ne fonctionne pas correctement . Cela va attraper plus de résultats. Exemple: lorsque vous effectuez une recherche 3, cela va attraper 23 aussi

Personnellement, j’utilise le soulignement pour ce genre de choses … alors

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

alors “a” serait la ligne que vous vouliez de votre tableau où l’id était égal à 2

Je veux juste append quelque chose à la réponse de Willemoes . Le même code écrit directement dans le HTML ressemblera à ceci:

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

En supposant que “results” est une variable de votre FooController et que vous souhaitez afficher la propriété “name” de l’élément filtré.

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

  
{{data.name}}

Vous pouvez simplement faire une boucle sur votre tableau:

 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); 

Si vous ne voulez pas écrire ces boucles désordonnées, vous pouvez envisager d'utiliser underscore.js ou Lo-Dash (exemple dans ce dernier):

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

Si vous voulez la liste des éléments comme la ville sur la base de l’identifiant d’état, utilisez alors

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

Malheureusement (sauf erreur), je pense que vous devez parcourir l’object de résultats.

 for(var i = 0; i < results.length; i += 1){ var result = results[i]; if(result.id === id){ return result; } } 

Au moins, de cette façon, il sortira de l'itération dès qu'il trouvera l'identifiant correspondant correct.

Pourquoi compliquer la situation? c’est simple écrire une fonction comme ceci:

 function findBySpecField(data, reqField, value, resField) { var container = data; for (var i = 0; i < container.length; i++) { if (container[i][reqField] == value) { return(container[i][resField]); } } return ''; } 

Cas d'utilisation:

 var data=[{ "id": 502100, "name": "Bərdə filialı" }, { "id": 502122 "name": "10 saylı filialı" }, { "id": 503176 "name": "5 sayli filialı" }] console.log('Result is '+findBySpecField(data,'id','502100','name')); 

sortie:

 Result is Bərdə filialı 
 $scope.olkes = [{'id':11, 'name':'---Zəhmət olmasa seçim edin---'}, {'id':15, 'name':'Türkyə'}, {'id':45, 'name':'Azərbaycan'}, {'id':60, 'name':'Rusya'}, {'id':64, 'name':'Gürcüstan'}, {'id':65, 'name':'Qazaxıstan'}]; {{(olkes | filter: {id:45})[0].name}} 

sortie: Azərbaycan

Si vous le pouvez, concevez votre structure de données JSON en utilisant les index de tableau comme ID. Vous pouvez même “normaliser” vos tableaux JSON tant que vous ne rencontrerez aucun problème pour utiliser les index du tableau comme “clé primaire” et “clé étrangère”, quelque chose comme le SGBDR. En tant que tel, à l’avenir, vous pouvez même faire quelque chose comme ceci:

 function getParentById(childID) { var parentObject = parentArray[childArray[childID].parentID]; return parentObject; } 

C’est la solution “By Design” . Pour votre cas, simplement:

 var nameToFind = results[idToQuery - 1].name; 

Bien sûr, si votre format d’identifiant est quelque chose comme “XX-0001” dont l’index de son tableau est 0 , vous pouvez alors manipuler des chaînes pour mapper l’ID; ou bien rien ne peut être fait à ce sujet, sauf par la voie de l’itération.

Je sais que je suis trop tard pour répondre mais il est toujours préférable de se présenter plutôt que de ne pas apparaître du tout :). ES6 façon de l’obtenir:

 $http.get("data/SampleData.json").then(response => { let id = 'xyz'; let item = response.data.results.find(result => result.id === id); console.log(item); //your desired item }); 
  projectDetailsController.controller('ProjectDetailsCtrl', function ($scope, $routeParams, $http) { $http.get('data/projects.json').success(function(data) { $scope.projects = data; console.log(data); for(var i = 0; i < data.length; i++) { $scope.project = data[i]; if($scope.project.name === $routeParams.projectName) { console.log('project-details',$scope.project); return $scope.project; } } }); }); 

Je ne sais pas si c'est vraiment bien, mais cela m'a été utile. Je devais utiliser $ scope pour le faire fonctionner correctement.

utiliser $ timeout et exécuter une fonction pour rechercher dans le tableau “results”

 app.controller("Search", function ($scope, $timeout) { var foo = { "results": [ { "id": 12, "name": "Test" }, { "id": 2, "name": "Beispiel" }, { "id": 3, "name": "Sample" } ] }; $timeout(function () { for (var i = 0; i < foo.results.length; i++) { if (foo.results[i].id=== 2) { $scope.name = foo.results[i].name; } } }, 10); }); 

Le moyen simple d’obtenir (un) élément du tableau par id:

La méthode find () renvoie la valeur du premier élément du tableau qui satisfait à la fonction de test fournie. Sinon, undefined est renvoyé.

 function isBigEnough(element) { return element >= 15; } var integers = [12, 5, 8, 130, 160, 44]; integers.find(isBigEnough); // 130 only one element - first 

vous n’avez pas besoin d’utiliser filter () et attrapez le premier élément xx.filter () [0] comme dans les commentaires ci-dessus

Même chose pour les objects du tableau

 var foo = { "results" : [{ "id" : 1, "name" : "Test" }, { "id" : 2, "name" : "Beispiel" }, { "id" : 3, "name" : "Sample" } ]}; var secondElement = foo.results.find(function(item){ return item.id == 2; }); var json = JSON.ssortingngify(secondElement); console.log(json); 

Bien sûr, si vous avez plusieurs identifiants, utilisez la méthode filter () pour obtenir tous les objects. À votre santé

 function isBigEnough(element) { return element >= 15; } var integers = [12, 5, 8, 130, 160, 44]; integers.find(isBigEnough); // 130 only one element - first 

Je voudrais parcourir le tableau de résultats en utilisant un filtre angularjs comme celui-ci:

var foundResultObject = getObjectFromResultsList (résultats, 1);

 function getObjectFromResultsList(results, resultIdToResortingeve) { return $filter('filter')(results, { id: resultIdToResortingeve }, true)[0]; }