【问题标题】:How to import json file into AngularJs Application?如何将 json 文件导入 AngularJs 应用程序?
【发布时间】:2015-07-25 04:00:15
【问题描述】:

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

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

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

谢谢

【问题讨论】:

  • 你试过$resource, $http吗????

标签: javascript json angularjs import


【解决方案1】:

出于安全原因,客户端 javscript 无法访问本地文件系统。据我所知,您有 4 种可能的解决方案。为了方便起见,我在下面列出了它们。

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

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

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

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

【讨论】:

  • 这让我想起了整个“鼹鼠山”的事情
  • 真的吗?因为几个月前我第一次遇到这个问题时,这正是我发现的,并且被更有经验的开发人员反复告知。
  • 我同意您无法从本地设置访问 JSON 文件 - 但是“去学习 Node”对于一个简单问题的建议有点极端,您不觉得吗?跨度>
  • 尽管如此,如果有比我提供的两个更简单的解决方案,我也非常感谢了解它!
  • 这就是答案! +1 和 +1
【解决方案2】:

这似乎太简单了,如果我过于简单,请原谅我:

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

【讨论】:

  • 我认为这并不能解决我的问题,因为我想从我的 PC 导入文件而不是从服务中导入。
  • 因此,您可以将 json 字符串复制/粘贴到应用程序中包含的 js 文件中。您只需创建一个变量并将其设置为 json 字符串:var myData = { "prop1": "val1", "prop2": "val2" }; -- 确保整个对象周围没有引号。
猜你喜欢
  • 2018-11-14
  • 2018-03-16
  • 1970-01-01
  • 2018-10-17
  • 2013-10-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-08-08
相关资源
最近更新 更多