Deserialise JSON-String zu Objekt mit AngularJS mithilfe Generieren Ionic

Ich bin nach dieser AngularJS Tutorial.

Bin ich erfolgreich anzeigen zu können ein Datenmodell " array-Liste im browser (Chrome 37.0.2062.94) wenn instanziiert mit dem Objekt-literal Schreibweise, wobei $Umfang.Sätze vom Typ "Objekt".

Controller: (Auszug)

'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"
  }
];
}]);

Ansicht (Auszug):

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

Aber ich bekomme Probleme, wenn ich statt zu speichern und das array von hashes in eine JSON-Datei (d.h. eine app/data/Sätze.json), wie folgt:

Sätze.JSON:

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

Ich versuche zu verwenden, die AngularJS $http-service zum ausführen eines HTTP GET-Anforderung zum abrufen dieser JSON-Daten. Das tutorial wird erwähnt, dass AngularJS erkennt und analysiert die JSON-Antwort, die automatisch und, den $http-Dienst gibt ein promise-Objekt mit einer Methode Erfolg. Also bin ich davon ausgegangen, dass der folgende code korrekt funktionieren würde, so dass $Umfang.Sätze wäre der Typ "Object", aber es teilt mir mit, dass es vom Typ "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");
    });

So, ich habe versucht, ordnen Sie es mit diesem folgenden code statt, gibt die folgende Fehlermeldung:

$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

Ich versuche die unten alternative mit Zitaten enthalten, gibt die folgende Fehlermeldung (die wird immer verwechselt mit den Buchstaben 'd' in das Wort 'Daten') :

$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

Ich versuche, diese Dritte alternative, die die gleiche wie die vorherigen Fehler:

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

Ich versuche eine vierte alternative, die gibt auch die gleiche wie die vorherigen Fehler:

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

Mit wenig Hoffnung kam ich über diese [Lebensretter post] (https://stackoverflow.com/a/6487190/3208553) , erwähnt die Verwendung von eval('Daten'), aber auch erwähnt, dass es ist ein Sicherheitsrisiko, aber ich habe es ausprobiert mit:

$scope.sentences = eval(data);

- Und das funktioniert!! Erfolgreich greift und zeigt die Daten aus der JSON-Datei als Liste im browser. Beachten Sie, dass, wenn ich überprüfen, was es ordnet mit der Konsole.log(eval(data)); er gibt mir [object object],[object object],[object object],[object object]

Aber ich kann nicht Feiern, weil ich nicht verstehe, warum die anderen alternativen, die ich versucht, hat nicht funktioniert...

Also meine Fragen an die community:

  1. Warum nicht das AngularJS $http-service erkennen und Parsen der JSON-Antwort automatisch und schicken Sie es als ein Objekt (anstelle eines Strings)?
  2. Warum nicht das AngularJS fromJSON Deserialisieren der JSON-string ohne Fehler? (das erscheint, führen Sie einfach JSON.parse(") entsprechend seiner Source Code)
  3. Ist mein JSON-Kodierung kompetent und sind meine Eingaben falsch überprüft, die in diesem einfachen Beispiel? Ist das der Grund, warum nur die unsicheren 'eval' - Methode funktioniert bei mir (mit den damit verbundenen Sicherheitsrisiken)?

FYI, Hier ist der neueste commit auf meinen Ionic-app im Zusammenhang mit diesem post auf GitHub

loszuwerden, die ; am Ende Ihres JSON. Der string sollte immer beginnen und enden mit geschweiften Klammern. Wenn Sie Zweifel haben, fügen Sie es in jsonlint.com zu validieren. JSON-Parser brechen, wenn alles unregelmäßig ist.
Vielen Dank für die richtige Lösung, JSONLint richtig erkannt das Semikolon-problem. Ich entfernt das Semikolon am Ende der JSON-Datei, und jetzt kann ich einfach verwenden $scope.sentences = data; (bevorzugt) oder alternativ $scope.sentences = angular.fromJson(data); ohne Fehler. Ich habe einen pull-request Hier, um hoffentlich verbessern die AngularJS Tutorial-Erfahrung für andere.

InformationsquelleAutor Luke Schoen | 2014-09-14

  1. 1

    Ich den Fehler behoben nach der Suche nach einem fehlenden Komma in meine JSON-Datei.

    InformationsquelleAutor Nadeem Khoury

Schreibe einen Kommentar