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:

  1. 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.
  2. 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.
  3. 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.
  4. 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&deg;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 pas id 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!
InformationsquelleAutor Isaiah Lee | 2014-03-07