AngularJS : récupérer des données à partir d'un tableau json avec un id
J'ai un fichier json où je suis de stockage d'informations de toutes les personnes dans ma base de données. J'ai fait l'utiliser pour afficher un prénom, un nom dans une page web et je veux ajouter la possibilité d'afficher les détails de chaque personne.
À le faire, je suis l'aide de l'id de la personne comme ceci :
.when('/people/:id', {templateUrl: 'partials/people-detail.html'})
Il fonctionne très bien, j'ai une page générée pour chaque personne, ce qui est agréable. Mais maintenant, j'aimerais obtenir de l'information de la personne en arrière.
La façon la plus simple aurait été d'avoir un fichier json pour chaque personne, mais je n'aime pas particulièrement l'idée d'avoir tant de fichier.
Donc mon idée est de faire une itération sur les gens.fichier json pour trouver la bonne et de l'utiliser, mais ça ne fonctionne pas.
Voici mon controller :
var PeopleController = angular.module ('PeopleController', []);
PeopleController.controller('PeopleDetailCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
$scope.search = function() {
var url = 'data/people.json';
$http.get(url).success(httpSuccess).error(function() {
alert('Unable to get back informations :( ');
});
}
httpSuccess = function(response) {
$scope.persons = response;
}
function getById(arr, id) {
for (var d = 0, len = arr.length; d < len; d += 1) {
if (arr[d].id === id) {
return arr[d];
}
}
}
$scope.search();
$scope.person = getById($scope.persons,$routeParams.id);
}]);
Bien, peut-être que ma solution est mauvaise car elle ne fonctionne pas, mais je n'ai pas trouver un autre moyen de le faire.
Maintenant, je suis tout à toi 🙂
Merci pour la lecture.
OriginalL'auteur Ryuu | 2014-03-26
Vous devez vous connecter pour publier un commentaire.
Le problème, c'est que votre
$scope.search
méthode contient$http.get()
qui est asynchrone.Ce que cela signifie est votre prochaine ligne (celle qui définit
$scope.person
) exécute avant le fichier json a été lu. En tant que tel,$scope.persons
est vide au moment où elle est exécutée.Vous pouvez prendre avantage du fait que
$http.get()
retourne un chaînage promesse ici.Donc, si vous changez votre
search()
fonction de retour que vous le promets, vous pouvez ensuite utiliserthen()
pour remplirperson
quand tout a été couronnée de succès:(note de l'
return
déclaration).Puis changer la personne de la population à profiter de cette:
Si cela fonctionne, alors le succès retourne une promesse, oui. Vous devriez lire sur les promesses, si vous voulez comprendre plus. C'est un javascript principe qui est bien documenté. Quant à votre solution pour passer en ID: la meilleure option est de stocker vos données dans une base de données et non pas un fichier json, puis à la requête de base de données directement par exposer une API sur votre serveur.
Je recherche pour cela, je vous remercie. À l'aide d'une base de données et un serveur a été ma première idée, mais l'application est également censé travailler en mode hors connexion (application mobile avec cordova) donc je choisir de stock tout en local et ajout de la possibilité de mettre à jour les fichiers en demandant au serveur.
Pour des nombres relativement petits, les itérations ne devrait pas être trop un problème. J'imagine cordova donne accès à des bases de données de l'appareil même si il pourrait être intéressant de regarder dans si la performance devient un problème
Il travaille toujours. Résolu mon problème! Mais, juste pour vérifier. Est-il un meilleur moyen de le faire? Il a été un long temps depuis votre réponse. Et depuis que je suis de départ de l'apprentissage angulaire maintenant, est-il une meilleure façon d'obtenir l'élément par son id?
OriginalL'auteur Ed Hinchliffe
J'espère obtenir d'une personne est une tout autre événement sur clic. Vous pouvez essayer de grep:
En supposant que vous avez toutes les personnes disponibles, sinon, cette logique doit se déplacer à l'intérieur de la partie de la réussite de rappel pour le http appel.
OriginalL'auteur dmahapatro
J'ai utilisé ECMAScript 5 filtre pour obtenir personne par id et déplacé votre recherche par id de la réussite de la méthode, puisque nous avons affaire avec appel ajax.
Exemple:
Live Exemple: http://plnkr.co/edit/jPT6aC5UqLdHGJ1Clfkg?p=preview
filtre crée un tableau.
OriginalL'auteur Alex Choroshin