如何用angularjs读取本地json

JavaScript047

如何用angularjs读取本地json,第1张

用angularjs读取本地json的方法如下：

1、本地json文件的内容如下：

[{ "text":"learn angular", "done":true },

{ "text":"build an angular app", "done":false},

{ "text":"something", "done":false },

{ "text":"another todo", "done":true }]

2、利用angularjs读取的方法：

var App = angular.module('App', [])

App.controller('TodoCtrl', function($scope, $http) {

$http.get('todos.json')

.then(function(res){

$scope.todos = res.data

})

})

问题1：js访问本地json

如果可以这样随意访问，你打开的任何网站不就可以通过js把你本地文件全部获取到了吗，这是非常危险的；这个不是技术上的能不能，而是安全策略问题，解决方法肯定有，大概是给浏览器某种授权。

我比较推荐换一种方式来解决这个问题，你要的结果是访问json文件，如果json文件不是很大的话，何不直接用个js变量保存它的值；

另外可以考虑部署到服务器，通过ajax请求获取，通过jquery可以如下写：

$.get('/content/test.json', function(data) {

  alert(data)})

问题2：如何在前端显示

js操纵DOM，可以简单粗暴地加到body里，当然有更好展现方式，推荐单独写个div：

$('body').append(data)