Deserialise Chaîne JSON à l'Objet avec AngularJS à l'aide de Générer Ionique

Je suis ce Tutoriel AngularJS.

Je suis avec succès en mesure d'afficher un modèle de données tableau liste dans le navigateur (Chrome 37.0.2062.94) lorsqu'il est instancié à l'aide de l'objet de la notation littérale, où $champ d'application.des peines est de type "Objet".

Contrôleur: (extrait)

'use strict';
angular.module('YeomanIonic.controllers', [])
.controller('MapCtrl', ['$scope', '$ionicLoading', '$http', function($scope, $ionicLoading, $http) {
$scope.sentences = [
  {"name": "Hello",
   "snippet": "1"
  },
  {"name": "Goodbye", 
   "snippet": "2"
  }
];
}]);

Vue (extrait):

  <body ng-app="YeomanIonic" ng-controller="MapCtrl">
            <ul>
              <li ng-repeat="sentence in sentences">
                <span>{{sentence.name}}</span>
                <p>{{sentence.snippet}}</p>
              </li>
            </ul>

Mais j'ai des problèmes quand je, au lieu de stocker ce tableau de hachages dans un fichier JSON (c'est à dire app/data/phrases.json), comme suit:

phrases.JSON:

[
  {"name": "Hello",
   "snippet": "1"
  },
  {"name": "Goodbye", 
   "snippet": "2"
  }
];

J'ai tenter d'utiliser le AngularJS $service http pour effectuer une requête HTTP GET pour récupérer cette de données JSON. Le tutoriel mentionne que AngularJS détecte et analyse de la réponse JSON automatiquement et que le $service http renvoie un objet promise à un succès de la méthode. Donc, je suppose que le code suivant ne fonctionnera pas correctement tel que $champ d'application.phrases peuvent être de type "Objet", cependant il m'informe qu'il est de type "String".

  $http({
    method: 'GET', 
    url: 'data/sentences.json'
  }).
    success(function(data, status, headers, config) {
      console.log("HTTP Request - Success");
      $scope.sentences = data;
      console.log(typeof($scope.sentences));
    }).
    error(function(data, status, headers, config) {
      console.log("HTTP Request - Error");
    });

J'ai donc tenté de lui attribuer ce code suivant à la place, ce qui donne l'erreur suivante:

$scope.sentences = angular.fromJson(data);

SyntaxError: Unexpected token ;
    at Object.parse (native)
    at Object.fromJson (http://127.0.0.1:9000/bower_components/angular/angular.js:1139:14)
    at http://127.0.0.1:9000/scripts/controllers.js:34:59
    at http://127.0.0.1:9000/bower_components/angular/angular.js:8105:11
    at wrappedCallback (http://127.0.0.1:9000/bower_components/angular/angular.js:11561:81)
    at wrappedCallback (http://127.0.0.1:9000/bower_components/angular/angular.js:11561:81)
    at http://127.0.0.1:9000/bower_components/angular/angular.js:11647:26
    at Scope.$eval (http://127.0.0.1:9000/bower_components/angular/angular.js:12673:28)
    at Scope.$digest (http://127.0.0.1:9000/bower_components/angular/angular.js:12485:31)
    at Scope.$apply (http://127.0.0.1:9000/bower_components/angular/angular.js:12777:24) angular.js:10061

J'essaie de le ci-dessous alternative avec des citations, ce qui donne le message d'erreur suivant (qui est de se confondre avec la lettre " d "dans le mot "données") :

$scope.sentences = angular.fromJson('data');

SyntaxError: Unexpected token d
    at Object.parse (native)
    at Object.fromJson (http://127.0.0.1:9000/bower_components/angular/angular.js:1139:14)
    at http://127.0.0.1:9000/scripts/controllers.js:34:59
    at http://127.0.0.1:9000/bower_components/angular/angular.js:8105:11
    at wrappedCallback (http://127.0.0.1:9000/bower_components/angular/angular.js:11561:81)
    at wrappedCallback (http://127.0.0.1:9000/bower_components/angular/angular.js:11561:81)
    at http://127.0.0.1:9000/bower_components/angular/angular.js:11647:26
    at Scope.$eval (http://127.0.0.1:9000/bower_components/angular/angular.js:12673:28)
    at Scope.$digest (http://127.0.0.1:9000/bower_components/angular/angular.js:12485:31)
    at Scope.$apply (http://127.0.0.1:9000/bower_components/angular/angular.js:12777:24) angular.js:10061

J'essaie cette troisième alternative, ce qui donne le même que le précédent erreur:

$scope.sentences = window.JSON.parse('data');

J'ai essayer une quatrième variante, qui donne aussi le même que le précédent erreur:

$scope.sentences = JSON.parse('data');

Avec peu d'espoir à gauche, je suis tombé sur ce [bouée de sauvetage post] (https://stackoverflow.com/a/6487190/3208553) que mentionné à l'aide de la fonction eval ("données"), mais qui mentionne aussi qu'il présente un risque pour la sécurité, mais je lui ai donné un coup de feu avec:

$scope.sentences = eval(data);

Et cela fonctionne!! Il a réussi l'attrape et affiche les données du fichier JSON comme une liste dans le navigateur. Notez que lorsque je vérifie ce qu'il attribue à la console.log(eval(data)); il me donne [object object],[object object],[object object],[object object]

Mais je ne peux pas célébrer parce que je ne comprends pas pourquoi les autres solutions que j'ai essayé ne fonctionne pas...

Donc mes questions à la communauté sont:

Pourquoi ne pas le AngularJS $service http détecter et analyse de la réponse JSON automatiquement et de le retourner comme un Objet (au lieu d'une Chaîne de caractères)?
Pourquoi ne pas le AngularJS fromJSON désérialiser la chaîne JSON sans erreur? (ce qui semble tout simplement effectuer JSON.parse(") en fonction de son Le Code Source)
Est mon encodage JSON compétente et sont mes entrées incorrectement validé dans cet exemple simple? Est-ce pour cette raison seulement de l'insécurité "eval" la méthode fonctionne pour moi (avec ses avantages et risques pour la sécurité)?

Pour info, Ici est le dernier commit à mon Ionique application associée à ce post sur GitHub

se débarrasser de la ; à la fin de votre JSON. La chaîne doit toujours commencer et finir avec des accolades. En cas de doute, le coller dans jsonlint.com pour valider. JSON analyseurs de se cassera si tout est irrégulière.
Merci pour la bonne solution, JSONLint correctement identifié le point-virgule problème. J'ai enlevé le point-virgule à la fin du fichier JSON, et maintenant je peux tout simplement utiliser $scope.sentences = data; (de préférence) ou sinon $scope.sentences = angular.fromJson(data); sans erreurs. J'ai fait une demande de pull Ici nous l'espérons, d'améliorer le Tutoriel AngularJS expérience pour les autres.

OriginalL'auteur Luke Schoen | 2014-09-14

1

J'ai corrigé ce bug après avoir constaté un manque de virgule dans mon fichier JSON.

OriginalL'auteur Nadeem Khoury

Vous devez vous connecter pour publier un commentaire.