使用Cordova/ionic/Angular的本地json文件。适用于浏览器，但不适用于设备？

我正在尝试使用生活在data.json文件中的JSON对象作为我正在处理的快速原型的数据集。这生活在my_project/www/data/目录中。我有一个Angular服务，它使用$http来抓取这个文件中的数据，做一些事情，然后在整个应用中使用它。使用Cordova/ionic/Angular的本地json文件。适用于浏览器，但不适用于设备？

我正在使用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（）。任何指导？

来源

2015-05-14 amlyhamm

嗨艾米 - 传递给onError的错误是什么？ – rhodesjason

嘿杰森！它只是$ http.get中的响应对象 - 上面列出的对象是onError获取的对象。 – amlyhamm

在您的本地开发人员机器上，当您运行离子服务时，您实际上正在运行Web服务器。因此像../../data.json这样的路径可以工作，因为它在具有完整文件系统访问权限的web服务器环境中完全有效。

但是，如果您尝试在设备上执行相同的操作，则可能会遇到问题，因为该设备具有适当的安全策略，不允许ajax在根外部遍历。它不是一个动态的网络服务器，所以它不能在树上加载文件。相反，你会使用类似cordova file plugin的东西来从文件系统中获取文件内容。如果您愿意，您可以使用ngCordova与插件进行交互，使其不那么痛苦。

我99％确定这是发生了什么事情，但您可以通过将您的$ http调用指向公共可用服务器上托管的一些dummy .json数据来测试我的理论，以查看它是否有效。 Here是一些虚拟的json数据。

来源

2015-05-14 18:31:19 JimTheDev

使用其他地方托管的$ http和JSON数据效果很好。我将尝试给文件插件，看看我是否找到成功。你知道这个插件是否是唯一实现我所尝试的方法吗？ – amlyhamm

我这么认为，但是如果我记得，离子视图支持大多数标准插件，所以它也应该在他们的服务器上运行。 – JimTheDev

另一种方法是将数据文件存储在嵌套位置而不是树上的“..”中？因此，在与应用程序文件同名的数据文件夹中，例如调用'data/data.json'？ – rhodesjason

我也在找这个，发现了这个问题，因为没有真正的答案，我不停地在网上搜索与从ozexpert发现this answer在爱奥尼亚论坛的问题：

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

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

来源

2015-09-15 20:45:23 Absulit

只是在这里离开这里，因为我有原始问题作者相同的问题。简单地从$ http.get函数中的json文件路径中删除任何起始斜杠为我解决了这个问题，现在加载json数据在浏览器模拟器和我的android设备上都可以工作。无论您的控制器或服务位于何处，$ http调用url的根目录始终都是index.html文件夹。所以使用该文件夹的相对路径，它应该可以工作。像$ http.get（“data/data。JSON“）

来源

2015-11-12 15:07:10

作为@乙醚提到，检查你的路径，并确保它不以“/”开头。删除/从相对路径也适用于我。 –

所以这是一个例子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 }}

希望这有助于:)

来源

2016-01-26 13:29:42

更新：离子2测试版（版本日期2016年8月10日）

您必须添加前缀本地URL是这样的：前缀+'你的/本地/资源”。

前缀的平台：

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

我们可以创建一个urlResolver提供商做这个工作。

注意：只能更改* .ts代码中的url来访问本地资源，不要使用远程url或html代码来执行此操作。玩得开心，并与测试版祝你好运。

的入门Ioner

来源

2016-08-16 11:14:38

它可以访问使用$ http.get本地资源。

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

js/data.json

请勿使用../js/data.json。使用它只能在本地浏览器中使用。使用js/data.json可以在Cordova的本地浏览器和iOS设备上运行。

来源

2017-07-04 09:58:28 sanme98

使用Cordova/ionic/Angular的本地json文件。适用于浏览器，但不适用于设备？

回答

相关问题