Verwenden Sie lokale JSON-Datei mit Cordova/ionic/Angular. Funktioniert im Browser, aber nicht auf dem Gerät?

Question

Ich versuche, ein JSON-Objekt zu verwenden, das in einer Datei data.json lebt, um das Dataset für einen schnellen Prototyp zu sein, an dem ich arbeite. Dies lebt in einem Verzeichnis my_project/www/data/. Ich habe einen Angular-Dienst, der die Daten in dieser Datei unter Verwendung von $http erfasst, einige Dinge daran tut und dann in meiner gesamten App verwendet wird.

Ich verwende Cordova und Ionic. Bei Verwendung von ionic serve auf meinem Computer sieht alles im Browser perfekt aus. Wenn jedoch ionic view (http://view.ionic.io/) und Öffnen der App auf meinem iPad verwenden, sehe ich ein:

{"data":null,"status":0,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"../data/items.json","headers":{"Accept":"application/json,test/plain,*/*}},"statusText":""} 

auf eine Antwort. Ich würde denken, dass wenn es ein relatives URL-Problem wäre, es auch nicht im Browser funktionieren würde, aber das ist nicht der Fall.

Hier ist, was ich tue:

config.xml hat diese Zeile:

<access origin="*" subdomains="true"/> 

Mein Dienst, der die einfache Anfrage Preforms tut:

return $http.get("../data/data.json").then(function (response) { 
    return response.data; 
}); 

Und schließlich in mein Controller, bitte ich um den Service, die Anfrage vorzufüllen:

myService.goGetData().then(onComplete, onError); 

In meinem Browser wird onComplete() aufgerufen und auf dem iPad wird onError() aufgerufen. Irgendwelche Anleitung?

Answer 1

Auf Ihrem lokalen Entwicklungscomputer führen Sie einen Webserver aus, wenn Sie ionic serve ausführen. Ein Pfad wie ../../data.json funktioniert also, weil er im Kontext des Webservers, der vollständigen Dateisystemzugriff hat, absolut gültig ist.

Wenn Sie jedoch versuchen, dasselbe auf Ihrem Gerät zu tun, werden Sie wahrscheinlich auf ein Problem stoßen, da das Gerät über Sicherheitsrichtlinien verfügt, die es nicht zulassen, dass Ajax außerhalb des Stammverzeichnisses läuft . Es ist kein dynamischer Webserver, so dass keine Dateien in den Baum geladen werden können. Stattdessen würden Sie etwas wie die cordova file plugin verwenden, um den Dateiinhalt aus dem Dateisystem zu greifen. Wenn Sie möchten, können Sie ngCordova verwenden, um die Interaktion mit dem Plugin ein bisschen weniger schmerzhaft zu machen. Ich bin zu 99% sicher, dass dies passiert, aber Sie können meine Theorie testen, indem Sie Ihren $ http-Aufruf auf einige Pseudo-JSON-Daten richten, die auf einem öffentlich verfügbaren Server gehostet werden, um zu sehen, ob es funktioniert. Here sind einige Dummy-JSON-Daten.

Answer 2

ich auch für diese Suche wurde und fand diese Frage, da es keine wirkliche Antwort auf das Problem ist, ich meine Suche im Internet gehalten und this answer am Ionic Forum von ozexpert gefunden:

var url = ""; 
if(ionic.Platform.isAndroid()){ 
    url = "/android_asset/www/"; 
} 

I‘ Ich habe es benutzt, um ein 3D-Modell und seine Texturen zu laden.

Answer 3

Ich werde nur hier verlassen, weil ich das gleiche Problem wie der ursprüngliche Fragesteller hatte. Einfaches Entfernen von Start-Schrägstrichen aus dem JSON-Dateipfad in der $ http.get-Funktion löste dieses Problem für mich. Das Laden der JSON-Daten funktioniert nun sowohl im Browser-Emulator als auch auf meinem Android-Gerät. Der Stamm der $ http-Aufruf-URL scheint immer der Ordner "index.html" zu sein, unabhängig davon, wo sich Ihr Controller oder Dienst befindet. Verwenden Sie also einen relativen Pfad von diesem Ordner und es sollte funktionieren. wie $ http.get ("Daten/Daten.json ")

Answer 4

So ist dies ein Beispiel JSON-Datei. es als data.json

[ 
     { 
     "Name" : "Sabba", 
     "City" : "London", 
      "Country" : "UK" 
     }, 
     { 
     "Name" : "Tom", 
     "City" : "NY", 
     "Country" : "USA" 
     } 
    ] 

speichern Und das ist, was ein Beispiel Controller wie

var app = angular.module('myApp', ['ionic']); 
    app.controller('ExhibitionTabCtrl', ['$scope', '$http', function($scope,$http) { 
     $http.get("your/path/from/index/data.json") 
     .success(function (response) 
     { 
     $scope.names = response; 
     }); 
    }]); 

Dann in Ihrer Vorlage machen sieht sicher, dass Sie Ihren Controller referenzieren.

Sie sollten dann in der Lage sein, das a zu verwenden Ausdruck, der die Daten

{{ names }} 

Hoffnung zu erhalten, das hilft :)

Answer 5

Update: ionische 2 Beta (Version Datum 10. Aug 2016)

Sie Präfix lokale URL wie folgt hinzufügen: Präfix + ' Ihre/lokale/Ressource '.

Präfix von Plattform:

ios = '../www/' 
android = '../www/' 
browser = '' 

können wir einen urlResolver Provider erstellen, um diese Arbeit zu tun.

hinweis: nur url in * .ts code ändern, um auf lokale ressource zuzugreifen, tun sie dies mit remote url oder in html code. Viel Spaß und viel Glück mit der Beta-Version.

Ein Starter Ioner

Answer 6

Es ist möglich, lokale Ressourcen http.get $ zuzugreifen.

Wenn sich die JSON-Datei in www/js/data.json befindet. Sie können unter Verwendung

js/data.json 

zugreifen Verwenden Sie nicht ../js/data.json. Das funktioniert nur im lokalen Browser. Verwenden Sie js/data.json wird sowohl für den lokalen Browser als auch für das iOS-Gerät für Cordova funktionieren.