将本地 json 文件与 Cordova/ionic/Angular 一起使用。在浏览器中有效，但在设备上无效？

Question

我正在尝试使用 data.json 文件中的 JSON 对象作为我正在处理的快速原型的数据集。它位于 my_project/www/data/ 目录中。我有一个 Angular 服务，它使用 $http 获取文件中的数据，对它做一些事情，然后在我的应用程序中使用它。

我正在使用 Cordova 和 Ionic。在我的计算机上使用 ionic serve 时，浏览器中的一切看起来都很完美。但是，当使用 ionic view (http://view.ionic.io/) 并在我的 iPad 上打开应用程序时，我看到：

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

求回复。我认为如果它是一个相对的 URL 问题，它也不会在浏览器中工作，但事实并非如此。

这是我正在做的事情：

config.xml 有这一行：

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

我执行简单请求的服务正在做：

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

最后，在我的控制器中，我要求服务执行请求：

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

在我的浏览器中，onComplete() 被调用，而在 iPad 中，onError() 被调用。有指导吗？

Answer 1

在您的本地开发机器上，当您运行离子服务时，您实际上是在运行网络服务器。所以像 ../../data.json 这样的路径会起作用，因为它在具有完整文件系统访问权限的网络服务器的上下文中是完全有效的。

但是，如果您尝试在您的设备上做同样的事情，您可能会运行遇到问题，因为该设备的安全策略不允许 ajax 在根外向上遍历。它不是一个动态网络服务器，所以它不能在树上加载文件。相反，您会使用 cordova file plugin to grab the file contents from the filesystem. If you prefer, you can use ngCordova 之类的东西来减少与插件的交互。

我 99% 确定这就是正在发生的事情，但您可以通过将 $http 调用指向一些虚拟 .json 托管在公共服务器上的数据来检验我的理论，看看它是否有效。 Here 是一些虚拟 json 数据。

Answer 2

我也在寻找这个并找到了这个问题，因为没有真正的问题答案我一直在互联网上搜索并在 ozexpert 的 Ionic 论坛上找到 this answer：

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

我用它来加载 3D 模型及其纹理。

Answer 3

就把它留在这里，因为我遇到了与原始问题作者相同的问题。简单地从 $http.get 函数中的 json 文件路径中删除任何起始斜杠就解决了这个问题，现在加载 json 数据在浏览器模拟器和我的 android 设备。 $http 调用 url 的根目录似乎始终是 index.html 文件夹，无论您的控制器或服务位于何处。因此，使用该文件夹的相对路径，它应该可以工作。比如 $http.get("data/data.json")

Answer 4

所以这是一个示例 json 文件。保存为 data.json

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

这就是示例控制器的样子

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

然后在您的模板中确保您正在引用您的控制器。

  <ion-content class="padding" ng-controller="ExhibitionTabCtrl">

然后您应该能够使用 a 表达式来获取数据

{{ names }}

希望这对您有所帮助:)

Answer 5

更新：ionic 2 beta（版本日期 2016 年 8 月 10 日）

您必须像这样向本地 url 添加前缀：prefix + 'your/local/resource'.

平台前缀：

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

我们可以创建一个 url解析器提供程序来完成这项工作。

注意：仅在 *.ts 代码中更改 url 以访问本地资源，不要在远程 url 或 html 代码中执行此操作。玩得开心，祝你好运。

启动离子发生器

Answer 6

可以使用 $http.get.

访问本地资源

如果 json 文件位于 www/js/data.json。您可以使用

访问

js/data.json

不要使用../js/data.json。使用它仅适用于本地浏览器。使用 js/data。json 将适用于本地浏览器和 Cordova 的 iOS 设备。

将本地 json 文件与 Cordova/ionic/Angular 一起使用。在浏览器中有效，但在设备上无效？

Use local json file with Cordova/ionic/Angular. Works in browser, but not on device?

json

ios

angularjs

cordova

ionic