AngularJS - ne Peut pas accéder à récupéré les données JSON dans la vue
Je viens de passer la dernière heure de la recherche et la lecture d'un tas de semblable stackoverflow pages et a été incapable de trouver une solution. Je vais essayer d'être aussi descriptif que possible, mais s'il vous plaît laissez-moi savoir si j'ai besoin de fournir d'autres détails.
En gros, je suis en essayant d'attraper un .fichier json à l'aide de $http GET. Une fois que je l'obtiens, je vais le stocker dans $champ d'application.des sacs, puis sur mon html (affichage) de la page, je suis en train d'essayer d'accéder au contenu à utiliser comme titre, de détails, d'images, etc.
Permet de commencer avec la contrôleur:
munyApp.controller('productController', ['$scope', '$location', '$http',
function ($scope, $location, $http) {
var $url2parse = $location.path();
var $urlSplit = $url2parse.split("/");
var $bag2show = $urlSplit.pop();
var $bag2showString = String($bag2show);
console.log($bag2showString);
$http({method: 'GET', url: 'handbags/n1-black-details.json'}).success(function(data) {
$scope.bags = data;
console.log($scope.bags);
$scope.message = "it works!";
});
Pour l'instant, s'il vous plaît ignorer l'aléatoire var lignes. J'y reviendrai plus tard, car je devine que c'est pas lié à mon problème ici.
Et voici un petit bloc de l' HTML où le contrôleur à utiliser:
<div id="detail_large_container" ng-controller="productController">
{{bags.id}}
{{bags['id']}}
</div>
Pour une raison quelconque, je ne peux pas obtenir la valeur de l'id de montrer, ce qui est censé être "n1-noir".
Cela peut sembler très simple (il est probablement, je suis un débutant avec tout cela), mais la raison de cela est embarrassant pour moi, c'est que j'ai été capable de faire la même chose pour un autre contrôleur et il fonctionne bien. Je fais un copier collé le travail de contrôleur de modifier comme cette version plus récente, et pour quelque raison que ce soit, il ne semble pas fonctionner.
Voici un exemple de un autre contrôleur que EST de travail:
munyApp.controller('handbagsController', ['$scope', '$http',
function ($scope, $http) {
$http.get('handbags/bagsfull.json').success(function(data) {
$scope.bags = data;
});
}]);
Avec ce contrôleur, il saisit le fichier json bien et je suis capable d'utiliser son contenu dans la page html en utilisant {{sacs.somekey}}.
Certains curieux des choses que j'ai couru dans:
- Sur mon nouveau contrôleur, il n'a pas à aller chercher le .fichier json lorsque j'ai utilisé la $http.get() de la syntaxe. Il n'a commencé à le chercher avec succès quand j'ai changé la syntaxe à utiliser le $http({method: 'GET', url: "}) style. Pourquoi j'ai dû changer c'est assez confus pour moi.
J'ai tous mes contrôleurs stockés dans le même .fichier js et mon plus âgés à utiliser le $http.get() d'amende, alors que mon nouvel échec. - J'ai inclus un $console.log($champ d'application.les sacs) après le réglage de $champ d'application.sacs pour les données qui ont été extraites de la .fichier json. Dans ma console chromée, il montre qu'il a cherché l' .fichier json amende. Il retournés correctement mon .fichier json avec toutes les données intactes. Mais lorsque j'essaie d'utiliser les données dans mon code html, c'est juste vide.
- Pour le test, j'ai mis un $champ d'application.message = "il travaille" à l'intérieur de l' $http.le succès de la fonction. Lorsque j'utilise {{$scope.message}} dans le code html, il affiche le message correctement. Ce qui m'amène à croire que je suis en utilisant le $scope correctement (ma compréhension de $champ d'application est encore assez limité). Donc ce qui est ahurissant, c'est que l' .json est correctement récupérés (comme je peux le voir dans ma console), et le html permet d'afficher le $scope.message, mais ne peut pas utiliser le $scope.les données de l' .json.
- Enfin, à tous ceux aléatoire var lignes dans le code du contrôleur était juste une façon pour moi de saisir la partie de l'URL après le dernier "/". C'est juste en utilisant la norme du code JS, je pense que c'est ok. C'est peut-être pas?
Toute aide ou information sur ce serait grandement apprécié. S'il vous plaît laissez-moi savoir si vous avez besoin de toute autre information qui serait utile pour cette!
Voici la .json contenu du fichier ci-dessous (sur demande):
[
{
"id": "n1-black",
"title": "n°1 (Black)",
"description": "TOTE IN TEXTURED CALFSKIN\\nBLACK\\n001",
"images": [
"images/handbags/details/n1-black-1.jpg",
"images/handbags/details/n1-black-2.jpg",
"images/handbags/details/n1-black-3.jpg",
"images/handbags/details/n1-black-4.jpg"
]
}
]
- Je ne dis cela parce que
bags
est au pluriel, donc, je veux juste m'en assurer. Ce qui est retourné dans le JSON? Est-il une liste? Une table de hachage? Aussi, êtes-vous sûr que l'-tête content-type doit être retourné correctement? Votre angulaire de code pourrait être l'analyse de la réponse en tant que chaîne de caractères, qui ne sera pasid
propriété - Hey Ian, je viens de mettre à jour mon post avec la totalité de la pâte de la .fichier json. Il est petit, et je pense que c'est une liste de paires clé-valeur? Comment puis-je vérifier le contenu de l'en-tête de type ou de le modifier? C'est étrange parce que je n'ai pas eu à l'utiliser tout ça avec mes autres contrôleurs..
- si c'est dans un tableau que vous avez à dire
bags[1].id
- Merci, Nick. Qui semble résoudre le problème. Je suppose que depuis cette .fichier json n'a qu'un objet, je n'ai pas besoin d'en faire un tableau. Je me sens vraiment stupide, mais merci beaucoup!
Vous devez vous connecter pour publier un commentaire.
Juste une supposition, mais vous avez probablement besoin de parser le JSON avant de pouvoir l'utiliser.
Essayez ceci:
Juste au cas où quelqu'un vient à travers avec un problème similaire, je vais vous donner une explication.
Si vous jetez un oeil à son fichier JSON, vous verrez qu'il contient un tableau JSON avec un élément en elle.
Dans la réussite, il a cédé la réponse d'une requête get pour le fichier JSON pour les sacs variable sur son $scope.
Quand il a essayé d'utiliser l'expression
{{bags.id}}
il n'a pas de travail parce quebags
n'était pas un objet, mais un tableau d'objets. Quand il a utilisé{{bags[0].id}}
cela a fonctionné parce quebags[0]
a été l'objet réel qu'il attendait.J'ai trouvé la solution, avec l'aide de Nick. Elle n'est pas toujours un sens pour moi la raison pour laquelle il a travaillé de cette façon mais il l'a fait.
J'avais à l'état partie de la .objet json j'ai été en utilisant en déclarant {{sacs[0].quelque chose}} au lieu de {{sacs.quelque chose}}. Je suis encore un peu incertain pourquoi, comme mon fichier json n'a qu'un seul objet en elle. Je suppose que je dois l'écrire comme ça quel que soit le nombre d'objets à l'intérieur.
Aussi, la vraie raison pour laquelle j'ai eu du mal a cause de l'endroit où je met le ng-controller dans ma page html.
Ce que j'ai fait a été de le mettre à l'intérieur d'un div appelé Un, et a essayé d'accéder à des données qui ont été extraites à l'aide de ce contrôleur à partir d'un autre div appelé B. Il fait sens pour moi maintenant pourquoi cela ne fonctionne pas, et je pense que j'ai juste pris un autre pas de plus en enveloppant ma tête autour de l'ensemble du MVC idée.
Merci pour l'aide tout le monde!