如何将json文件导入AngularJs Application?

时间:2015-07-25 04:00:16

标签: javascript json angularjs import

我正在使用AngularJS,我必须导入/导出一个数组。

我可以导出数组对象,将其转换为JSON对象,然后使用FileSave.js库在本地保存文件。

现在我找不到任何关于如何将这个json文件从我的PC导入我的应用程序,然后将其转换为一个对象来显示数组的信息。

由于

2 个答案:

答案 0 :(得分:3)

出于安全原因,客户端javscript无法按设计访问本地文件系统。据我所知,有4种可能的解决方案。我已经按顺序列出了它们。

1)在程序中创建一个变量,只需将json文件的内容复制粘贴到js文件中作为值。这将花费两秒钟,但如果您的JSON文件很大或者您需要使用多个json文件,它可能会非常混乱。var localJSONFile = [literally copy-pasted JSON text]

2)查看Brackets by Adobe。我只是做了一些快速的谷歌搜索,发现this page显示了如何访问本地文件。打开它并执行ctrl + f> '地方'而且你会发现它。这是我推荐的方法,因为它快速而简单。你必须切换你的IDE,如果你刚刚开始,那么大多数IDE(Brackets,Sublime,VSCode,Atom)都会有同样的感受。

3)创建基本角度服务以注入您的程序,其唯一目的是将复制粘贴的JSON文件存储为变量。这最终与1)相同,但可以帮助您减少混乱和易于管理的文件。如果您不想切换IDE并且您将使用几个JSON文件,这可能是最佳选择。

4)获取本地服务器。有很多不同的选择。当我在你的位置时,我走了node.js路线。确实存在学习曲线,因为学习设置任何服务器,但至少对于节点,您仍然使用javascript,因此您不必学习新语言。如果您知道在您正在处理的项目之间需要有许多不同的数据文件来回流动,这是推荐的方法。如果是这种情况,理想情况下,您将有一位后端开发人员很快加入您的行列。如果没有,您可以通过下载node.js和npm(自带)来快速设置服务器,并在命令提示符下使用npm来安装一个名为express的东西,然后安装express-generator。使用快速生成器,您可以从命令行运行init命令,它将为您构建一个完整功能的Web服务器,包括本地文件夹结构,您可以使用命令提示符中的快速命令对其进行实例化。然后,您只需转到它为您的路线提供的文件并进行调整。 Node.js可以读取您的本地文件系统,因此您可以设置一个快速路由,在命中时,从文件系统中读取文件并将其发送给请求者。那会让你马上前进。如果以后需要添加数据库,则需要在本地安装数据库,从npm获取该数据库的插件(有吨,所以不用担心),然后更新您的路径以便从数据库中读取。

答案 1 :(得分:0)

这似乎太容易了,所以请原谅我,如果我过于简单化了:

$http.get('/myJsonFile.json').
  success(function(data, status, headers, config) {
    $scope.myJsonData = data;
  });

或者,如果您的回复标题未设置为投放application/json

$http.get('/myJsonFile.json').
  success(function(data, status, headers, config) {
    $scope.myJsonData = JSON.parse(data);
  });